Turn the architecture in your head into a diagram with AI
Skills used in this guide (4)
生成精致且经过校验的架构图、工作流、时序图、数据流与状态图，输出为可探索的单页 HTML（内联 SVG、深浅双主题、可选轨迹动效），并支持导出 PNG/JPEG/WebP/SVG/WebM。可接受自然语言需求或粘贴 Mermaid 图。
npx skills add tt-a1i/archify -g生成深色主题的 SVG 架构图、云架构与基础设施图，输出为 HTML。
npx skills add NousResearch/hermes-agent -g生成扁平、极简的教学用 SVG 图示，输出为 HTML。
npx skills add NousResearch/hermes-agent -g生成手绘风格的 Excalidraw JSON 图，支持架构图、流程图与时序图。
npx skills add NousResearch/hermes-agent -g
The pain of diagramming isn't "can't draw" — it's that edits are exhausting: change one box and you re-layout the whole thing. Generating descriptive, re-flowable diagrams turns "drawing" into "describing structure"; editing text is 10x faster than editing the picture.
Who this is for / not for
For:
- Quick architecture / flow / sequence / data-flow diagrams
- Diagrams that will keep changing — want text-edit to re-flow
- Export PNG/SVG into docs or PPT
Not for:
- Brand-level refined color (AI diagrams prioritize structural accuracy, not art)
- Strict in-house icon library (give the icon spec first)
- Editable source for designers (pick an exportable format)
Before you start
- Structure: natural language or paste Mermaid with nodes and relations.
- Diagram type: architecture / flow / sequence / concept.
- (Optional) where it goes: doc, PPT, or web — decides export format.
Steps
1. Install the skill
archify outputs interactive HTML diagrams. Copy its folder into your client's skills directory (same as any Agent Skill):
| Client | Directory |
|---|---|
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ |
| Cursor | ~/.cursor/skills/ |
| Trae | ~/.trae/skills/ |
| CodeBuddy | ~/.codebuddy/skills/ |
| Tongyi Lingma | ~/.lingma/skills/ |
2. Describe structure in natural language
Draw a sequence diagram for user checkout:
User → Gateway(auth) → OrderSvc(persist) → Inventory(dec deduct)
If stock low, OrderSvc → Notify(sms) and mark order failed.
Dark theme, rounded-rect nodes, label arrows with message names.3. Mermaid works too
If you already have Mermaid, hand it to archify as input — it renders interactive HTML and supports export.
4. Pick a style
- Tech architecture / cloud:
architecture-diagram(dark SVG) - Teaching / concept:
concept-diagrams(flat minimal) - Hand-drawn flow / sequence:
excalidraw
Pitfalls
| Pit | Symptom | Fix |
|---|---|---|
| Wrong relation | Arrow reversed | Say "who calls whom"; give Mermaid if needed |
| Too loud | Colors hurt readability | Dark + one accent; accent only on key path |
| Not editable | Bitmap, can't change | Keep description/source, don't store only PNG |
| Blurry in PPT | Bitmap scaled up | Export SVG; vector stays sharp |
| Wrong icons | Off brand library | Give icon + color spec first |
FAQ
Drop into PPT directly?
Yes. Export SVG or PNG; SVG vector in PPT is sharpest when scaled.
Existing Mermaid usable?
Yes. archify accepts Mermaid and renders interactive HTML.
Diagram keeps changing?
Keep the text/Mermaid source; editing text beats editing bitmap.
Dark to light?
Yes, specify light theme in prompt; use light when pasting into light docs.
Org chart / mind map?
Architecture and concept diagrams both work; for pure mind map start with concept-diagrams.
Related guides
Continue across these scenes:
相关源码
- tt-a1i/archify source
- NousResearch/hermes-agent · architecture-diagram source
- Agent Skill open format spec
一句话结论
结论：把「画」变成「描述结构」，改文字比改图快十倍；要可改就保留描述或 Mermaid 源。
References
Related Scenes
Generate illustrations and marketing images with AI
The worst text-to-image is "one-line prompt, pure luck". The point: set style ref + subject + composition + ratio as structured prompt, then iterate small — not throw "draw something nice" and hope.
Generate icons and article illustrations with AI
The pain of illustration isn't "can't draw" — it's "inconsistent style, blurry when scaled, can't edit". The point of AI vector illustration: set style and size first, want vector not bitmap, so it scales sharp and the source stays editable.
Make podcast scripts and voiceover with AI
The pain of podcast/talking-head isn't "no voice" — it's "script reads like a paper, voice sounds robotic, nobody finishes". The point of AI: write the script as spoken human language, pick a natural voice, then decide on visuals — don't pile effects upfront.
Brainstorm and mind-map with AI
The worst brainstorming is "diverge and stop". The point of AI help: first force enough candidates (quantity before quality), then converge on 3 doable ones by "feasibility / impact" — not stop at "many ideas".