mermaid

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用此技能

ALWAYS use this skill when the user mentions:

Drawing, creating, generating, making, or building any diagram, chart, or graph
Visualizing processes, workflows, systems, architectures, or data
Any request to "画图" (draw diagram), "绘图" (draw chart), "生成图" (generate diagram), "创建图" (create diagram)
Flowcharts, sequence diagrams, class diagrams, state diagrams, or any diagram type
Architecture diagrams, system diagrams, or design diagrams
Data visualization, charts, or graphs
Process flows, workflows, or business processes
Project timelines, schedules, or Gantt charts
User journeys, mindmaps, or hierarchical structures
Database schemas, ER diagrams, or entity relationships
Git branching structures or version control diagrams
Any visual representation or diagrammatic content

Trigger phrases include:

"画一个图" (draw a diagram), "画流程图" (draw flowchart), "画架构图" (draw architecture diagram)
"创建一个图表" (create a chart), "生成一个图" (generate a diagram)
"帮我画" (help me draw), "给我画" (draw for me), "画出来" (draw it out)
"用图表示" (represent with diagram), "可视化" (visualize), "画个图说明" (draw a diagram to explain)
"流程图" (flowchart), "时序图" (sequence diagram), "类图" (class diagram), "状态图" (state diagram)
"架构图" (architecture diagram), "系统图" (system diagram), "设计图" (design diagram)
"甘特图" (Gantt chart), "思维导图" (mindmap), "时间线" (timeline)
"用 Mermaid" (use Mermaid), "Mermaid 画图" (draw with Mermaid), "Mermaid 语法" (Mermaid syntax)
Any mention of "diagram", "chart", "graph", "flowchart", "visualization", "drawing", "Mermaid"

IMPORTANT: Mermaid vs PlantUML - Two Different Diagramming Tools:

Mermaid and PlantUML are two different diagramming tools with different purposes:

Mermaid: A JavaScript-based diagramming tool designed for Markdown documentation. It uses Markdown-inspired syntax and renders directly in Markdown renderers (GitHub, GitLab, wikis, blogs). Best for quick diagrams, Markdown documentation, and simple visualizations. Output format is fenced Markdown code blocks with the
```
mermaid
```
language tag.
PlantUML: A component that allows you to create various UML diagrams through simple textual descriptions. It focuses on UML standards and complex system architecture. Best for UML diagrams, enterprise architecture, C4 models, and diagrams requiring precise UML notation. Output format is
```
@startuml
```
/
```
@enduml
```
blocks or
```
.puml
```
files.

When both PlantUML and Mermaid skills are matched:

If the user explicitly mentions "Mermaid" or "Markdown diagram", use this skill (Mermaid)
If the user explicitly mentions "PlantUML", "UML diagram", or "C4 model", use the PlantUML skill instead
If the user references Markdown contexts (README, wiki, GitHub/GitLab, blog), default to Mermaid
If the user references UML standards or
```
.puml
```
, default to PlantUML
If the user mentions both or neither, ALWAYS ask the user to choose: "I can create this diagram using either Mermaid (Markdown code block) or PlantUML (@startuml). Which output format do you prefer?"

当用户提及以下内容时，请务必使用本技能：

绘制、创建、生成任何图表或图形
可视化流程、工作流、系统、架构或数据
任何包含“画图”“绘图”“生成图”“创建图”的请求
流程图、时序图、类图、状态图或任何类型的图表
架构图、系统图或设计图
数据可视化、图表或图形
流程、工作流或业务流程
项目时间线、进度表或甘特图
用户旅程、思维导图或层级结构
数据库模式、ER图或实体关系
Git分支结构或版本控制图
任何可视化表示或图表内容

触发短语包括：

“画一个图”“画流程图”“画架构图”
“创建一个图表”“生成一个图”
“帮我画”“给我画”“画出来”
“用图表示”“可视化”“画个图说明”
“流程图”“时序图”“类图”“状态图”
“架构图”“系统图”“设计图”
“甘特图”“思维导图”“时间线”
“用 Mermaid”“Mermaid 画图”“Mermaid 语法”
任何提及“diagram”“chart”“graph”“flowchart”“visualization”“drawing”“Mermaid”的表述

重要提示：Mermaid 与 PlantUML - 两款不同的绘图工具：

Mermaid和PlantUML是两款用途不同的绘图工具：

Mermaid：一款专为Markdown文档设计的基于JavaScript的绘图工具。它使用类Markdown的语法，可直接在Markdown渲染器（GitHub、GitLab、维基、博客）中渲染。最适合快速制作图表、Markdown文档配图和简单可视化。输出格式为带有
```
mermaid
```
语言标签的Markdown代码块。
PlantUML：一个允许通过简单文本描述创建各种UML图的组件。它专注于UML标准和复杂系统架构。最适合UML图、企业架构图、C4模型以及需要精确UML符号的图表。输出格式为
```
@startuml
```
/
```
@enduml
```
块或
```
.puml
```
文件。

当同时匹配Mermaid和PlantUML技能时：

如果用户明确提及“Mermaid”或“Markdown diagram”，使用本技能（Mermaid）
如果用户明确提及“PlantUML”“UML diagram”或“C4 model”，则使用PlantUML技能
如果用户提到Markdown相关场景（README、维基、GitHub/GitLab、博客），默认使用Mermaid
如果用户提到UML标准或
```
.puml
```
，默认使用PlantUML
如果用户同时提及两者或都未提及，务必请用户选择：“我可以使用Mermaid（Markdown代码块）或PlantUML（@startuml）来创建此图表。你偏好哪种输出格式？”

How to use this skill

如何使用此技能

CRITICAL: Mermaid is a Markdown-focused diagramming tool. This skill should be triggered when the user explicitly mentions "Mermaid", needs diagrams for Markdown documentation, or wants diagrams that render directly in Markdown renderers (GitHub, GitLab, wikis, blogs).

Trigger this skill when you see:

User says "用 Mermaid" (use Mermaid), "Mermaid 画图" (draw with Mermaid), "Markdown 图" (Markdown diagram)
User needs diagrams for Markdown documentation, GitHub, GitLab, wikis, or blogs
User wants quick diagrams that render directly in Markdown renderers
User mentions any diagram type for Markdown: flowchart, sequence diagram, class diagram, etc.
User wants to visualize, represent, or illustrate something with a diagram in Markdown format

When both PlantUML and Mermaid are matched, ALWAYS ask the user to choose the output format or tool, as they are two different diagramming tools with different purposes.

To create a Mermaid diagram:

Identify the diagram type from the user's request:
- Flowchart/flow chart/流程图 →
```
flowchart
```
  or
```
graph
```
- Sequence diagram/时序图 →
```
sequenceDiagram
```
- Class diagram/类图 →
```
classDiagram
```
- State diagram/状态图 →
```
stateDiagram
```
  or
```
stateDiagram-v2
```
- Entity relationship diagram/实体关系图 →
```
erDiagram
```
- User journey/用户旅程图 →
```
journey
```
- Gantt chart/甘特图 →
```
gantt
```
- Pie chart/饼图 →
```
pie
```
- Quadrant chart/象限图 →
```
quadrantChart
```
- Requirement diagram/需求图 →
```
requirementDiagram
```
- Git graph/Git图 →
```
gitGraph
```
- C4 diagram/C4图 →
```
C4Context
```
  ,
```
C4Container
```
  ,
```
C4Component
```
  ,
```
C4Deployment
```
  , or
```
C4Dynamic
```
- Mindmap/思维导图 →
```
mindmap
```
- Timeline/时间线图 →
```
timeline
```
- ZenUML/禅UML →
```
zenuml
```
- Sankey diagram/桑基图 →
```
sankey
```
- XY chart/XY图 →
```
xychart
```
- Block diagram/方块图 →
```
block
```
- Packet diagram/数据包图 →
```
packet
```
- Kanban/看板图 →
```
kanban
```
- Architecture diagram/架构图 →
```
architecture-beta
```
  (requires Mermaid v11.1.0+)
- Radar chart/雷达图 →
```
radar-beta
```
  (requires Mermaid v11.1.0+)
- Treemap/树状图 →
```
treemap-beta
```
  (requires Mermaid v11.1.0+)
Load the appropriate example file from the
```
examples/
```
directory:
- ```
examples/flowchart.md
```
  - For flowcharts and process diagrams
- ```
examples/sequence.md
```
  - For sequence diagrams showing interactions
- ```
examples/class.md
```
  - For class diagrams and object-oriented designs
- ```
examples/state.md
```
  - For state diagrams and state machines
- ```
examples/er.md
```
  - For entity relationship diagrams
- ```
examples/journey.md
```
  - For user journey maps
- ```
examples/gantt.md
```
  - For Gantt charts and project timelines
- ```
examples/pie.md
```
  - For pie charts
- ```
examples/quadrant.md
```
  - For quadrant charts
- ```
examples/requirement.md
```
  - For requirement diagrams
- ```
examples/gitgraph.md
```
  - For Git branching diagrams
- ```
examples/c4.md
```
  - For C4 architecture diagrams
- ```
examples/mindmap.md
```
  - For mindmaps
- ```
examples/timeline.md
```
  - For timeline diagrams
- ```
examples/zenuml.md
```
  - For ZenUML diagrams
- ```
examples/sankey.md
```
  - For Sankey flow diagrams
- ```
examples/xychart.md
```
  - For XY charts (bar/line charts)
- ```
examples/block.md
```
  - For block diagrams
- ```
examples/packet.md
```
  - For packet diagrams
- ```
examples/kanban.md
```
  - For Kanban boards
- ```
examples/architecture.md
```
  - For architecture diagrams
- ```
examples/radar.md
```
  - For radar charts
- ```
examples/treemap.md
```
  - For treemap diagrams
Follow the specific instructions in that example file for syntax, structure, and best practices

Important Notes:
- Beta diagram types (
```
architecture-beta
```
  ,
```
radar-beta
```
  ,
```
treemap-beta
```
  ) require Mermaid v11.1.0 or higher
- If the rendering environment doesn't support beta diagram types, use the flowchart alternatives provided in the example files
- Always check the example file for version compatibility notes and alternative syntax options
Generate the Mermaid code wrapped in a Markdown code block with proper syntax highlighting:
IMPORTANT: Always wrap the Mermaid code in a Markdown code block with
```
mermaid
```
language tag. This ensures the format is preserved when users copy the content.
Example format (use actual Mermaid syntax, not placeholders):
mermaid
```
flowchart TD
    A[Start] --> B[Process]
    B --> C[End]
```
Output Format Requirements:
- Always use triple backticks (```) with
```
mermaid
```
  language tag
- Never output raw Mermaid code without code block markers
- The code block must be complete and properly formatted
- Use actual valid Mermaid syntax, not placeholders like
```
<diagram-type>
```
  or
```
...diagram content...
```
- This ensures users can copy the code without losing formatting
Include styling and configuration when needed:
- Use
```
%%{ init: { theme: 'base' } }%%
```
  for theme configuration
- Apply
```
style
```
  directives for node styling
- Use
```
classDef
```
  for reusable style classes
Validate the syntax:
- Ensure all required elements are present
- Check that relationships and connections are properly defined
- Verify date formats for Gantt charts (YYYY-MM-DD)
- Confirm data formats for charts (pie, quadrant, etc.)
- For ER diagrams: Use underscores instead of hyphens in entity names (e.g.,
```
LINE_ITEM
```
  not
```
LINE-ITEM
```
  )
- For flowcharts: Avoid using "end" as a node label (use "End" or "END" instead)
- For class diagrams: Escape special characters in labels using backticks
- Check version compatibility for beta diagram types
Save the diagram to project directory:
- Default behavior: When generating a Mermaid diagram, save it to the current project directory
- Recommended locations:
  - ```
  docs/diagrams/
```
  - For documentation diagrams
- ```
docs/
```
    - For general documentation
  - ```
  diagrams/
```
  - For standalone diagram files
- Current directory (
```
  .
```
  ) - If no specific directory structure exists
- File naming: Use descriptive names like
```
system-architecture.md
```
  ,
```
user-flow.md
```
  ,
```
database-schema.md
```
  , etc.
- File format: Save as
```
.md
```
  file with the Mermaid code block inside
- Example: If user requests a system architecture diagram, save it as
```
docs/diagrams/system-architecture.md
```
  or
```
diagrams/system-architecture.md
```
- Ask if needed: If the project structure is unclear, ask the user where they'd like the diagram saved, but default to creating a
```
docs/
```
  or
```
diagrams/
```
  directory if it doesn't exist

Output Format and File Saving:

When generating a diagram, follow this response structure:

Save the file first: Create the diagram file in the project directory (e.g.,
```
docs/diagrams/system-architecture.md
```
)
Inform the user: Tell them where the file was saved
Display the diagram: Show the Mermaid code in a properly formatted Markdown code block with
```
mermaid
```
language tag

Example Response Structure:

First line: "I've created the Mermaid diagram and saved it to
```
docs/diagrams/system-architecture.md
```
."
Then show the diagram wrapped in a code block:
- Start with: three backticks +
```
mermaid
```
  + newline
- Then the Mermaid code
- End with: three backticks + newline

Critical Requirements:

The Mermaid code block MUST ALWAYS be properly formatted with triple backticks (```) and
```
mermaid
```
language tag
NEVER output raw Mermaid code without code block markers
The code block must be complete (opening and closing backticks)
This ensures users can copy the code without losing formatting
Always save the diagram file to the current project directory (default:
```
docs/diagrams/
```
or
```
diagrams/
```
)

If the diagram type doesn't match any existing example, refer to the Mermaid documentation or ask the user for clarification about the desired visualization.

关键提示：Mermaid是一款专注于Markdown的绘图工具。当用户明确提及“Mermaid”、需要为Markdown文档制作图表，或想要能直接在Markdown渲染器（GitHub、GitLab、维基、博客）中显示的图表时，触发本技能。

当看到以下内容时触发本技能：

用户说“用 Mermaid”“Mermaid 画图”“Markdown 图”
用户需要为Markdown文档、GitHub、GitLab、维基或博客制作图表
用户想要能直接在Markdown渲染器中显示的快速图表
用户提到任何适用于Markdown的图表类型：流程图、时序图、类图等
用户想要以Markdown格式的图表来可视化、表示或说明内容

当同时匹配PlantUML和Mermaid技能时，务必请用户选择输出格式或工具，因为它们是两款用途不同的绘图工具。

创建Mermaid图的步骤：

从用户请求中确定图表类型：
- 流程图 →
```
flowchart
```
  或
```
graph
```
- 时序图 →
```
sequenceDiagram
```
- 类图 →
```
classDiagram
```
- 状态图 →
```
stateDiagram
```
  或
```
stateDiagram-v2
```
- 实体关系图 →
```
erDiagram
```
- 用户旅程图 →
```
journey
```
- 甘特图 →
```
gantt
```
- 饼图 →
```
pie
```
- 象限图 →
```
quadrantChart
```
- 需求图 →
```
requirementDiagram
```
- Git图 →
```
gitGraph
```
- C4图 →
```
C4Context
```
  ,
```
C4Container
```
  ,
```
C4Component
```
  ,
```
C4Deployment
```
  , 或
```
C4Dynamic
```
- 思维导图 →
```
mindmap
```
- 时间线图 →
```
timeline
```
- ZenUML →
```
zenuml
```
- 桑基图 →
```
sankey
```
- XY图 →
```
xychart
```
- 方块图 →
```
block
```
- 数据包图 →
```
packet
```
- 看板图 →
```
kanban
```
- 架构图 →
```
architecture-beta
```
  （需要Mermaid v11.1.0+）
- 雷达图 →
```
radar-beta
```
  （需要Mermaid v11.1.0+）
- 树状图 →
```
treemap-beta
```
  （需要Mermaid v11.1.0+）
从
examples/
目录加载相应的示例文件：
- ```
examples/flowchart.md
```
  - 用于流程图和过程图
- ```
examples/sequence.md
```
  - 用于展示交互的时序图
- ```
examples/class.md
```
  - 用于类图和面向对象设计
- ```
examples/state.md
```
  - 用于状态图和状态机
- ```
examples/er.md
```
  - 用于实体关系图
- ```
examples/journey.md
```
  - 用于用户旅程图
- ```
examples/gantt.md
```
  - 用于甘特图和项目时间线
- ```
examples/pie.md
```
  - 用于饼图
- ```
examples/quadrant.md
```
  - 用于象限图
- ```
examples/requirement.md
```
  - 用于需求图
- ```
examples/gitgraph.md
```
  - 用于Git分支图
- ```
examples/c4.md
```
  - 用于C4架构图
- ```
examples/mindmap.md
```
  - 用于思维导图
- ```
examples/timeline.md
```
  - 用于时间线图
- ```
examples/zenuml.md
```
  - 用于ZenUML图
- ```
examples/sankey.md
```
  - 用于桑基流程图
- ```
examples/xychart.md
```
  - 用于XY图（柱状图/折线图）
- ```
examples/block.md
```
  - 用于方块图
- ```
examples/packet.md
```
  - 用于数据包图
- ```
examples/kanban.md
```
  - 用于看板图
- ```
examples/architecture.md
```
  - 用于架构图
- ```
examples/radar.md
```
  - 用于雷达图
- ```
examples/treemap.md
```
  - 用于树状图
遵循示例文件中的具体说明，包括语法、结构和最佳实践

重要注意事项：
- Beta版本的图表类型（
```
architecture-beta
```
  ,
```
radar-beta
```
  ,
```
treemap-beta
```
  ）需要Mermaid v11.1.0或更高版本
- 如果渲染环境不支持Beta版本的图表类型，使用示例文件中提供的流程图替代方案
- 务必查看示例文件中的版本兼容性说明和替代语法选项
生成包裹在Markdown代码块中的Mermaid代码：
重要提示：务必将Mermaid代码包裹在带有
```
mermaid
```
语言标签的Markdown代码块中。这样可以确保用户复制内容时格式不会丢失。
示例格式（使用实际的Mermaid语法，而非占位符）：
mermaid
```
flowchart TD
    A[Start] --> B[Process]
    B --> C[End]
```
输出格式要求：
- 始终使用三个反引号（```）并加上
```
mermaid
```
  语言标签
- 切勿输出未包裹在代码块中的原始Mermaid代码
- 代码块必须完整且格式正确
- 使用有效的Mermaid语法，而非
```
<diagram-type>
```
  或
```
...diagram content...
```
  这类占位符
- 确保用户无需修改即可直接复制使用
必要时添加样式和配置：
- 使用
```
%%{ init: { theme: 'base' } }%%
```
  进行主题配置
- 应用
```
style
```
  指令进行节点样式设置
- 使用
```
classDef
```
  定义可复用的样式类
验证语法：
- 确保所有必需元素都已包含
- 检查关系和连接是否定义正确
- 验证甘特图的日期格式（YYYY-MM-DD）
- 确认图表（饼图、象限图等）的数据格式正确
- 对于ER图：实体名称使用下划线而非连字符（例如
```
LINE_ITEM
```
  而非
```
LINE-ITEM
```
  ）
- 对于流程图：避免使用“end”作为节点标签（改用“End”或“END”）
- 对于类图：使用反引号转义标签中的特殊字符
- 检查Beta版本图表类型的兼容性
将图表保存到项目目录：
- 默认行为：生成Mermaid图时，保存到当前项目目录
- 推荐位置：
  - ```
  docs/diagrams/
```
  - 用于文档配图
- ```
docs/
```
    - 用于通用文档
  - ```
  diagrams/
```
  - 用于独立的图表文件
- 当前目录（
```
  .
```
  ）- 如果没有特定的目录结构
- 文件命名：使用描述性名称，例如
```
system-architecture.md
```
  ,
```
user-flow.md
```
  ,
```
database-schema.md
```
  等
- 文件格式：保存为
```
.md
```
  文件，内部包含Mermaid代码块
- 示例：如果用户请求系统架构图，保存为
```
docs/diagrams/system-architecture.md
```
  或
```
diagrams/system-architecture.md
```
- 必要时询问：如果项目结构不明确，询问用户希望将图表保存到何处；如果不存在特定目录，默认创建
```
docs/
```
  或
```
diagrams/
```
  目录

输出格式与文件保存：

生成图表时，请遵循以下响应结构：

先保存文件：在项目目录中创建图表文件（例如
```
docs/diagrams/system-architecture.md
```
）
通知用户：告知用户文件的保存位置
展示图表：将Mermaid代码显示在带有
```
mermaid
```
语言标签的正确格式的Markdown代码块中

示例响应结构：

第一行：“我已创建Mermaid图并保存到
```
docs/diagrams/system-architecture.md
```
。”
然后展示包裹在代码块中的图表：
- 开头：三个反引号 +
```
mermaid
```
  + 换行
- 接着是Mermaid代码
- 结尾：三个反引号 + 换行

关键要求：

Mermaid代码块必须始终使用三个反引号（```）和
```
mermaid
```
语言标签正确格式化
切勿输出未包裹在代码块中的原始Mermaid代码
代码块必须完整且格式正确
确保用户复制代码时不会丢失格式
始终将图表文件保存到当前项目目录（默认：
```
docs/diagrams/
```
或
```
diagrams/
```
）

如果图表类型与现有示例不匹配，请参考Mermaid文档或向用户澄清所需的可视化效果。

Version Compatibility

版本兼容性

Some diagram types have specific version requirements:

Beta diagram types (require Mermaid v11.1.0+):
- ```
architecture-beta
```
  - Architecture diagrams
- ```
radar-beta
```
  - Radar charts
- ```
treemap-beta
```
  - Treemap diagrams
Advanced features (require specific versions):
- Participant types with JSON configuration: Mermaid v10.0.0+
- Actor creation/destruction: Mermaid v10.3.0+
- Edge IDs and curve styles: Mermaid v11.10.0+
- New shapes with
```
@{}
```
  syntax: Mermaid v11.3.0+

If a beta diagram type is not supported, the example files provide flowchart alternatives that work with all Mermaid versions.

部分图表类型有特定的版本要求：

Beta版本图表类型（需要Mermaid v11.1.0+）：
- ```
architecture-beta
```
  - 架构图
- ```
radar-beta
```
  - 雷达图
- ```
treemap-beta
```
  - 树状图
高级功能（需要特定版本）：
- 带JSON配置的参与者类型：Mermaid v10.0.0+
- 参与者创建/销毁：Mermaid v10.3.0+
- 边缘ID和曲线样式：Mermaid v11.10.0+
- 使用
```
@{}
```
  语法的新形状：Mermaid v11.3.0+

如果Beta版本的图表类型不被支持，示例文件提供了适用于所有Mermaid版本的流程图替代方案。

Best Practices

最佳实践

Always use code blocks: Wrap all Mermaid code in Markdown code blocks with
```
mermaid
```
language tag
Check compatibility: Verify version requirements before using beta diagram types
Use alternatives: When beta types aren't supported, use the provided flowchart alternatives
Follow naming conventions: Avoid reserved keywords and special characters in node labels
Test syntax: Validate diagram syntax before saving to ensure proper rendering
Organize files: Save diagrams in appropriate directories (
```
docs/diagrams/
```
or
```
diagrams/
```
)
Use descriptive names: Name diagram files clearly (e.g.,
```
system-architecture.md
```
,
```
user-flow.md
```
)

始终使用代码块：将所有Mermaid代码包裹在带有
```
mermaid
```
语言标签的Markdown代码块中
检查兼容性：使用Beta版本图表类型前验证版本要求
使用替代方案：当Beta版本不被支持时，使用提供的流程图替代方案
遵循命名规范：节点标签中避免使用保留关键字和特殊字符
测试语法：保存前验证图表语法，确保能正确渲染
整理文件：将图表保存到合适的目录（
```
docs/diagrams/
```
或
```
diagrams/
```
）
使用描述性名称：为图表文件起清晰的名称（例如
```
system-architecture.md
```
,
```
user-flow.md
```
）

Mermaid vs PlantUML - Key Differences

Mermaid 与 PlantUML - 主要区别

Mermaid (This Skill):

Purpose: JavaScript-based diagramming tool designed for Markdown documentation
Main Use Case: Help documentation catch up with development
Best For:
- Markdown documents, GitHub, GitLab, wikis, blogs
- Quick diagrams that render directly in Markdown renderers
- Simple flowcharts, sequence diagrams, basic charts
- Rapid prototyping and iteration
- When the user explicitly requests Mermaid or needs Markdown-compatible diagrams

PlantUML (Different Skill):

Purpose: Component for creating various UML diagrams through textual descriptions
Main Use Case: UML-focused diagramming with emphasis on standard UML notation
Best For:
- Complex UML diagrams requiring precise notation (class, component, deployment diagrams)
- Enterprise architecture diagrams and C4 model diagrams
- Standard UML compliance requirements
- Diagrams requiring advanced customization, styling, or layout control
- When the user explicitly requests PlantUML or UML diagrams

When Both Skills Are Matched:

ALWAYS ask the user to choose: "I can create this diagram using either Mermaid or PlantUML. Mermaid is a JavaScript-based tool designed for Markdown documentation and renders directly in GitHub/GitLab. PlantUML is focused on UML diagrams and enterprise architecture. Which would you prefer?"
These are two different diagramming tools with different purposes - do not automatically choose one
If the user explicitly mentions one tool, use that tool
If the user mentions both or neither, ask the user to choose based on their needs

Mermaid（本技能）：

用途：专为Markdown文档设计的基于JavaScript的绘图工具
主要使用场景：帮助文档创作跟上开发进度
最适合：
- Markdown文档、GitHub、GitLab、维基、博客
- 可直接在Markdown渲染器中渲染的快速图表
- 简单流程图、时序图、基础图表
- 快速原型制作和迭代
- 用户明确请求Mermaid或需要兼容Markdown的图表时

PlantUML（另一技能）：

用途：通过文本描述创建各种UML图的组件
主要使用场景：专注于UML图，强调标准UML符号
最适合：
- 需要精确符号的复杂UML图（类图、组件图、部署图）
- 企业架构图和C4模型图
- 符合UML标准的需求
- 需要高级自定义、样式或布局控制的图表
- 用户明确请求PlantUML或UML图时

当同时匹配两款技能时：

务必请用户选择：“我可以使用Mermaid或PlantUML来创建此图表。Mermaid是专为Markdown文档设计的基于JavaScript的工具，可直接在GitHub/GitLab中渲染。PlantUML专注于UML图和企业架构。你偏好哪一种？”
这是两款用途不同的绘图工具 - 请勿自动选择其中一种
如果用户明确提及其中一款工具，使用该工具
如果用户同时提及两者或都未提及，请根据用户需求让其选择

Keywords

关键词

English keywords: mermaid, diagram, chart, graph, flowchart, flow chart, sequence diagram, class diagram, state diagram, entity relationship, ER diagram, user journey, Gantt chart, pie chart, quadrant chart, requirement diagram, Git graph, C4 diagram, mindmap, timeline, ZenUML, Sankey diagram, XY chart, block diagram, packet diagram, Kanban, architecture diagram, radar chart, treemap, draw, create, generate, make, build, visualize, visualization, drawing, plotting, mapping, schematics, blueprint, design diagram, system diagram, process flow, workflow, data visualization, visual representation

Chinese keywords (中文关键词): 流程图, 时序图, 类图, 状态图, 实体关系图, 用户旅程图, 甘特图, 饼图, 象限图, 需求图, Git图, C4图, 思维导图, 时间线图, 桑基图, XY图, 方块图, 数据包图, 看板图, 架构图, 雷达图, 树状图, 画图, 绘图, 生成图, 创建图, 制作图, 画流程图, 画架构图, 画时序图, 画类图, 画状态图, 画甘特图, 画思维导图, 画时间线, 可视化, 图表, 图形, 示意图, 设计图, 系统图, 流程图, 架构图, 时序图, 类图, 状态图, 甘特图, 思维导图, 时间线, 用图表示, 画出来, 给我画, 帮我画, 画一个, 创建一个图, 生成一个图, 画个图说明, 用图表展示, 可视化展示

英文关键词： mermaid, diagram, chart, graph, flowchart, flow chart, sequence diagram, class diagram, state diagram, entity relationship, ER diagram, user journey, Gantt chart, pie chart, quadrant chart, requirement diagram, Git graph, C4 diagram, mindmap, timeline, ZenUML, Sankey diagram, XY chart, block diagram, packet diagram, Kanban, architecture diagram, radar chart, treemap, draw, create, generate, make, build, visualize, visualization, drawing, plotting, mapping, schematics, blueprint, design diagram, system diagram, process flow, workflow, data visualization, visual representation

中文关键词： 流程图, 时序图, 类图, 状态图, 实体关系图, 用户旅程图, 甘特图, 饼图, 象限图, 需求图, Git图, C4图, 思维导图, 时间线图, 桑基图, XY图, 方块图, 数据包图, 看板图, 架构图, 雷达图, 树状图, 画图, 绘图, 生成图, 创建图, 制作图, 画流程图, 画架构图, 画时序图, 画类图, 画状态图, 画甘特图, 画思维导图, 画时间线, 可视化, 图表, 图形, 示意图, 设计图, 系统图, 流程图, 架构图, 时序图, 类图, 状态图, 甘特图, 思维导图, 时间线, 用图表示, 画出来, 给我画, 帮我画, 画一个, 创建一个图, 生成一个图, 画个图说明, 用图表展示, 可视化展示