Productivity
mermaid
使用 Mermaid 在 Markdown 中生成可渲染图表（```mermaid``` 代码块），适用于流程图/时序图/类图/状态图/ER/Gantt/思维导图/时间线等；当用户提到 Mermaid、Markdown 图表，或需要在 GitHub/GitLab/文档内直接渲染时使用。
使用 Mermaid 在 Markdown 中生成可渲染图表（```mermaid``` 代码块），适用于流程图/时序图/类图/状态图/ER/Gantt/思维导图/时间线等；当用户提到 Mermaid、Markdown 图表，或需要在 GitHub/GitLab/文档内直接渲染时使用。
ALWAYS use this skill when the user mentions:
Trigger phrases include:
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:
.puml, default to PlantUMLCRITICAL: 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:
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 or graphsequenceDiagramclassDiagramstateDiagram or stateDiagram-v2erDiagramjourneyganttpiequadrantChartrequirementDiagramgitGraphC4Context, C4Container, C4Component, C4Deployment, or C4Dynamicmindmaptimelinezenumlsankeyxychartblockpacketkanbanarchitecture-beta (requires Mermaid v11.1.0+)radar-beta (requires Mermaid v11.1.0+)treemap-beta (requires Mermaid v11.1.0+)Load the appropriate example file from the examples/ directory:
examples/flowchart.md - For flowcharts and process diagramsexamples/sequence.md - For sequence diagrams showing interactionsexamples/class.md - For class diagrams and object-oriented designsexamples/state.md - For state diagrams and state machinesexamples/er.md - For entity relationship diagramsexamples/journey.md - For user journey mapsexamples/gantt.md - For Gantt charts and project timelinesexamples/pie.md - For pie chartsexamples/quadrant.md - For quadrant chartsexamples/requirement.md - For requirement diagramsexamples/gitgraph.md - For Git branching diagramsexamples/c4.md - For C4 architecture diagramsexamples/mindmap.md - For mindmapsOutput 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:
docs/diagrams/system-architecture.md."mermaid + newlineCritical Requirements:
mermaid language tagdocs/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.
Some diagram types have specific version requirements:
Beta diagram types (require Mermaid v11.1.0+):
architecture-beta - Architecture diagramsradar-beta - Radar chartstreemap-beta - Treemap diagramsAdvanced features (require specific versions):
@{} 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.
mermaid language tagdocs/diagrams/ or diagrams/)system-architecture.md, user-flow.md)Mermaid (This Skill):
PlantUML (Different Skill):
When Both Skills Are Matched:
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图, 方块图, 数据包图, 看板图, 架构图, 雷达图, 树状图, 画图, 绘图, 生成图, 创建图, 制作图, 画流程图, 画架构图, 画时序图, 画类图, 画状态图, 画甘特图, 画思维导图, 画时间线, 可视化, 图表, 图形, 示意图, 设计图, 系统图, 流程图, 架构图, 时序图, 类图, 状态图, 甘特图, 思维导图, 时间线, 用图表示, 画出来, 给我画, 帮我画, 画一个, 创建一个图, 生成一个图, 画个图说明, 用图表展示, 可视化展示
确保开发环境已安装必要的依赖和工具。
根据项目需求进行基础配置。
按照示例代码实现核心功能。
运行测试确保功能正常。
完成开发后进行部署和监控。
examples/timeline.mdexamples/zenuml.md - For ZenUML diagramsexamples/sankey.md - For Sankey flow diagramsexamples/xychart.md - For XY charts (bar/line charts)examples/block.md - For block diagramsexamples/packet.md - For packet diagramsexamples/kanban.md - For Kanban boardsexamples/architecture.md - For architecture diagramsexamples/radar.md - For radar chartsexamples/treemap.md - For treemap diagramsFollow the specific instructions in that example file for syntax, structure, and best practices
Important Notes:
architecture-beta, radar-beta, treemap-beta) require Mermaid v11.1.0 or higherGenerate 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):
flowchart TD
A[Start] --> B[Process]
B --> C[End]
Output Format Requirements:
mermaid language tag<diagram-type> or ...diagram content...Include styling and configuration when needed:
%%{ init: { theme: 'base' } }%% for theme configurationstyle directives for node stylingclassDef for reusable style classesValidate the syntax:
LINE_ITEM not LINE-ITEM)Save the diagram to project directory:
docs/diagrams/ - For documentation diagramsdocs/ - For general documentationdiagrams/ - For standalone diagram files.) - If no specific directory structure existssystem-architecture.md, user-flow.md, database-schema.md, etc..md file with the Mermaid code block insidedocs/diagrams/system-architecture.md or diagrams/system-architecture.mddocs/ or diagrams/ directory if it doesn't exist