diagram-design-zh skill
A skill drawing diagrams with Chinese typography: 45 types, one HTML file, no external fonts, SVG and PNG export, Mermaid redraw.
- 50 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill only creates diagram files from your description and runs nothing on third-party services.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/diagram-design-zhDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill only creates diagram files from your description and runs nothing on third-party services.
This is third-party code. Review the repository files before installing.
What it does
The skill creates, redraws and edits diagrams in Chinese. You describe what the diagram should say, and the skill picks a suitable type from 45 and builds the finished work. By default it uses a white background and a general style, with the result in one HTML file with inline SVG and a font subset, so the diagram opens offline and can be saved and forwarded. Export to SVG or PNG is available when needed. Types cover architecture, data flow, database schemas, dependencies, deployment, ER, fishbone, Gantt, heatmaps and more. The skill can read Mermaid or draw.io structure and relay it under its own rules instead of only restyling it. Options include icons, a dark style, a terminal shell, step animation, annotations and a hand-drawn effect.
Who it is for. Technical writers, analysts and managers who prepare diagrams for a Chinese-speaking audience and want correct fonts, sizes and mixed Latin and Chinese text.
Good fit when
- An e-commerce architecture must be shown to managers far from technical detail
- A Mermaid sequence diagram needs redrawing with Chinese labels
- Revenue of five product lines is compared across two years in a clear chart
- A database schema or ER model must go into a presentation as one picture
- A cover for a publication in a non-standard size is needed
Not a fit when
- You need diagrams without Chinese typography: the original diagram-design project targets English text
- You need an editable draw.io diagram: the skill outputs HTML, SVG and PNG
- You need a quick sketch: the skill is built for finished work
Example request
Draw an e-commerce architecture for executives with Chinese labels on a white background.Limitations
The project is based on `diagram-design` by Cathryn Lavery and adds Chinese typography and finished examples. Automatic installation and discovery depend on your agent supporting the Agent Skills format, and the `skills` installer works only with agents it supports. Output defaults to a light style while other looks are enabled separately. Fonts are embedded as a subset, so after hand-editing text in a finished file regenerate through the skill. The skill version is 0.2.0, the license is MIT and third-party licenses are listed in `THIRD_PARTY_LICENSES.md`.
How to disable. Delete the `diagram-design-zh` skill folder from the agent skills directory. Finished HTML, SVG and PNG files stay with you and do not depend on the skill.
FAQ
How do I install the skill?
Run `npx skills add https://github.com/patrick-xin/diagram-design-zh --skill diagram-design-zh`. The agent must support the Agent Skills format.
How many diagram types are supported?
Forty-five. Each has an example in the project online gallery, where you can switch between light, dark and explanatory modes.
Can I redraw an existing Mermaid or draw.io diagram?
Yes. The skill reads the source diagram structure and relays it under its own rules instead of just restyling it.
Does the finished file work offline?
Yes. The result is a single HTML file with inline SVG and a subset of the needed fonts, with no external fonts loaded.
How do I choose a type when unsure?
Describe what the diagram should show and what the reader should see. If you let the agent choose, the skill picks a type and explains why, asking only about gaps that change meaning.
Discussion
No questions or reviews yet.
Related
SkillsA skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types
A skill that draws 45 types of animated diagrams from a short JSON spec and saves them as HTML, SVG, PNG, GIF and MP4
A skill that draws a system architecture diagram as one HTML file with SVG plus copy, PNG and PDF export
A skill that draws an Excalidraw-style diagram from a text prompt and returns an editor link, an animation and a PNG.
A skill that reads a repository, article or PDF and draws an interactive architecture diagram with animated data flows
Draw.io Skill
Draw.io Skill for Claude & Codex
Skills for draw.io diagrams: architecture, networks, flowcharts, import from Terraform and code, offline generation from YAML and PNG and SVG export
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| diagram-design-zh (this card) | no | 50 | ||
| Diagram Design | no | 66,598 | the original skill with English diagram rules; this adds Chinese typography and 45 finished types | |
| Claude Mermaid | no | not required | 221 | an MCP server that renders Mermaid in the browser; this redraws under its own rules into standalone HTML |
README in short
The README in Chinese lists features, shows a gallery of 45 types, describes installation through the skills CLI, sample prompts, import and export and testing. The project credits the author of the original diagram-design.
README badge
Original SKILL.md
--- name: diagram-design-zh description: 生成、重绘或修改中文图表，默认输出带内联 SVG 和内嵌字体的独立 HTML；可导出 PNG/SVG。用于架构、流程、数据比较、计划、关系与空间示意图，以及 Mermaid/draw.io 重绘；支持品牌样式、字体更换和可选动效。不用于一般网页或应用界面开发。 license: MIT metadata: version: "0.2.0" --- # 图表设计 用中文排版规则与共享样式生成通用、白底、开箱即用的图表。默认交付自包含 HTML + 内联 SVG；文件不依赖远程字体或脚本。 ## 0. 载入策略与样式选择 - 每次任务读本入口与 [style-guide.md](references/style-guide.md) 的通用规则，默认样式数据见 [default.json](styles/default.json)。默认直接制图；用户未要求品牌定制时，不以首次品牌问答阻塞制图。 - 用 `scripts/profiles.py resolve --project <项目根>` 解析项目样式（见 [profiles.md](references/profiles.md)）；命名档案只覆盖数据，未覆盖项从当前默认合并，不写安装目录。缺失/无效选择明确报错，不悄悄换品牌。 - 使用档案时简要说明本次生效档案，便于及时发现串样式，不设置确认停顿。 - 用户要求自己的颜色/字体时读 [onboarding.md](references/onboarding.md)。区分本张成品与命名项目档案；只改用户要求的范围。用户已明确给值和作用范围时直接执行；推导品牌映射或扩大持久化范围前给 diff 提案。 - 选定类型后读对应 `type-*.md`，参考其 `assets/example-*.html` 的结构；当前默认合并档案数据后决定颜色与字体，不把示例的旧值当用户样式。 - 规则适用关系：用户明确的内容/投放要求 → 对应类型、模式、尺寸的条件规则 → 通用默认。类型数量预算是默认清晰度目标，不能覆盖用户内容要求；数学、端点、守卫等含义不变量与动效控制器限额仍须满足。事实保真、有效无障碍、单文件契约始终成立。 ## 1. 默认处理 保留读者理解所需的信息，减少装饰；默认无阴影、渐变、图标、纹理或动效。用层次和间距组织内容，通常以 1–2 个 accent 焦点引导阅读。类型的数量编码与明确皮肤可有自己的形状词汇。 ## 2. 任务边界 用户要求图表就完成图表。表格或文字更适合时可以解释并建议，但不自行用它替换已明确要求的交付物。仅当信息缺失或选择会实质改变含义时澄清；用户说“你选/随便什么图”视为授权选型，说明理由后直接做。 ## 3. 选型：语义模式与视觉类型 排队容量、策略判定、信任边界、风险补偿、结构化产物或生命周期推进等行为承载含义时，读 [semantic-patterns.md](references/semantic-patterns.md) 选一个主模式，再选布局类型；没有匹配模式就直接选类型。阶段框架的泳道/时间线分工以该模式文档为准。 类型或变体名未直接出现在下表时，用 `python3 <技能目录>/scripts/catalog.py <名称>` 查询 [资源清单](references/catalog.json)，只载入匹配参考。 ### 类型路由（45 内置） | 要画的是…… | 类型 | 参考 | |---|---|---| | 系统的组件与连接（架构 / 拓扑） | **架构图**（改造前后对照用「变更对比」变体） | [type-architecture.md](references/type-architecture.md) | | 软件实际落位（环境 / 主机 / 副本 / 网络边界） | **部署图** | [type-deployment.md](references/type-deployment.md) | | 带分支的决策逻辑（流程图 / 决策 / 审批） | **流程图** | [type-flowchart.md](references/type-flowchart.md) | | 参与者之间按时间的消息（时序图 / 调用链 / 请求响应） | **时序图** | [type-sequence.md](references/type-sequence.md) | | 状态 + 转移 + 守卫（状态机 / 订单状态 / 生命周期） | **状态机**（单主体生命周期叙事用「生命周期相位图」语义模式） | [type-state.md](references/type-state.md) | | 一层楼/一个场地连同房与楼从上看（办公室/校园/仓库布局） | **轴测平面图** | [type-axonometric-plan.md](references/type-axonometric-plan.md) |