Back to Details

diagrams

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Diagram & Visualization Skill

图表与可视化技能

Create professional diagrams and visualizations in Markdown documents. Choose the right tool for the job, then read the detailed reference for that tool.
在Markdown文档中创建专业的图表与可视化内容。为任务选择合适的工具，然后阅读该工具的详细参考文档。

Decision Guide

决策指南

What are you trying to create?
NeedToolCode FenceReference
Flowchart, sequence diagram, state machine, class diagram, mindmapMermaid
```mermaid
mermaid.md
Dependency tree, call graph, module relationships, complex directed graphsGraphviz
```dot
graphviz.md
Bar chart, line chart, scatter plot, heatmap, data-driven visualizationVega-Lite
```vega-lite
vega.md
UML diagrams with icons (9,500+ stencils)PlantUML
```plantuml
plantuml.md
Cloud architecture (AWS/Azure/GCP/K8s)PlantUML
```plantuml
plantuml.md
Network topology, security architecturePlantUML
```plantuml
plantuml.md
KPI cards, timelines, roadmaps, funnels, SWOT, org charts, pie/bar chartsInfographic
```infographic
infographic.md
Mind map, knowledge graph, spatial planning boardJSON Canvas
```canvas
canvas.md
Layered system architecture, microservices, enterprise diagramsArchitectureRaw HTMLarchitecture.md
Editorial info cards, data highlights, knowledge summariesInfocardRaw HTMLinfocard.md
你想要创建什么？
需求工具代码块标识参考文档
流程图、时序图、状态机、类图、思维导图Mermaid
```mermaid
mermaid.md
依赖树、调用图、模块关系、复杂有向图Graphviz
```dot
graphviz.md
柱状图、折线图、散点图、热力图、数据驱动可视化Vega-Lite
```vega-lite
vega.md
带图标（9500+模板）的UML图PlantUML
```plantuml
plantuml.md
云架构（AWS/Azure/GCP/K8s）PlantUML
```plantuml
plantuml.md
网络拓扑、安全架构PlantUML
```plantuml
plantuml.md
KPI卡片、时间线、路线图、漏斗图、SWOT分析、组织架构图、饼图/柱状图Infographic
```infographic
infographic.md
思维导图、知识图谱、空间规划板JSON Canvas
```canvas
canvas.md
分层系统架构、微服务、企业级图表Architecture原生HTMLarchitecture.md
编辑类信息卡片、数据亮点、知识摘要Infocard原生HTMLinfocard.md

Quick Selection Rules

快速选择规则

  1. Simple process flow? Use Mermaid
  2. Data with numbers? Use Vega-Lite (charts) or Infographic (visual templates)
  3. Software modeling with icons? Use PlantUML
  4. Cloud/network/security architecture? Use PlantUML with provider stencils
  5. Complex graph with custom layout? Use Graphviz
  6. Styled system architecture? Use Architecture (HTML)
  7. Magazine-quality content card? Use Infocard (HTML)
  8. Quick visual summary (KPI, timeline, funnel)? Use Infographic
  9. Spatial/freeform layout? Use JSON Canvas
  1. 简单流程？ 使用Mermaid
  2. 带数值的数据？ 使用Vega-Lite（图表）或Infographic（可视化模板）
  3. 带图标的软件建模？ 使用PlantUML
  4. 云/网络/安全架构？ 使用带有供应商模板的PlantUML
  5. 自定义布局的复杂图形？ 使用Graphviz
  6. 风格化系统架构？ 使用Architecture（HTML）
  7. 杂志级内容卡片？ 使用Infocard（HTML）
  8. 快速可视化摘要（KPI、时间线、漏斗图）？ 使用Infographic
  9. 空间/自由格式布局？ 使用JSON Canvas

Workflow

工作流程

  1. Identify the diagram type from the decision guide above
  2. Read the appropriate reference file for detailed syntax and rules
  3. Follow the critical syntax rules exactly to avoid rendering failures
  4. For Architecture and Infocard: pick a layout first, then apply a style
  1. 根据上述决策指南确定图表类型
  2. 阅读对应参考文件了解详细语法与规则
  3. 严格遵循关键语法规则，避免渲染失败
  4. 对于Architecture和Infocard：先选择布局，再应用样式

Important Notes

重要注意事项

  • Architecture and Infocard use raw HTML embedded directly in Markdown (no code fences)
  • PlantUML diagrams always start with 
    @startuml
    and end with 
    @enduml
  • Never use 
    ```text
     for any diagram type - it won't render
  • When unsure between tools, prefer Mermaid for simplicity or PlantUML for icon-rich diagrams
  • Architecture和Infocard使用原生HTML直接嵌入Markdown中（无需代码块）
  • PlantUML图表始终以
    @startuml
    开头，
    @enduml
    结尾
  • **切勿使用
    ```text
    **作为任何图表类型的代码块标识——无法渲染
  • 当不确定使用哪种工具时，优先选择简单的Mermaid或图标丰富的PlantUML