dev-swarm-mermaid

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mermaid Diagram Generation

Mermaid图表生成

This skill provides instructions for creating Mermaid diagrams and converting them to SVG or PNG images using the Mermaid CLI (

mmdc

本技能提供了使用Mermaid CLI（

mmdc

）创建Mermaid图表并将其转换为SVG或PNG图片的操作指南。

When to Use This Skill

何时使用本技能

User needs to visualize flows, architecture, or data structures
User asks to create diagrams for documentation
User wants to convert Mermaid syntax to image files
User needs flowcharts, sequence diagrams, class diagrams, or ER diagrams

用户需要可视化流程、架构或数据结构
用户要求为文档创建图表
用户希望将Mermaid语法转换为图片文件
用户需要流程图、时序图、类图或实体关系图

Prerequisites

前置条件

Node.js and pnpm must be installed (refer to
```
dev-swarm-nodejs
```
skill if needed).

必须安装Node.js和pnpm（如有需要，请参考
```
dev-swarm-nodejs
```
技能）。

Your Roles in This Skill

本技能中的角色

Tech Manager (Architect): Design diagram structures to effectively communicate system architecture and data flows. Choose appropriate diagram types for different use cases. Ensure diagrams accurately represent technical concepts and relationships.
DevOps Engineer: Execute Mermaid CLI commands to generate diagrams. Verify pnpm and Node.js installations. Convert Mermaid files to SVG or PNG formats. Troubleshoot diagram generation issues.

技术经理（架构师）：设计图表结构以有效传达系统架构和数据流。为不同使用场景选择合适的图表类型。确保图表准确体现技术概念和关系。
DevOps工程师：执行Mermaid CLI命令以生成图表。验证pnpm和Node.js的安装情况。将Mermaid文件转换为SVG或PNG格式。排查图表生成过程中的问题。

Role Communication

角色沟通

As an expert in your assigned roles, you must announce your actions before performing them using the following format:

As a {Role} [and {Role}, ...], I will {action description}

This communication pattern ensures transparency and allows for human-in-the-loop oversight at key decision points.

作为指定角色的专家，你必须在执行操作前按照以下格式告知你的行动：

作为{角色}[和{角色}，...]，我将{行动描述}

这种沟通模式确保了透明度，并允许在关键决策点进行人工介入监督。

Installation

安装

We recommend using

pnpm dlx

to execute the Mermaid CLI without a permanent global installation.

Verify

mmdc

availability:

bash

pnpm dlx @mermaid-js/mermaid-cli --version

我们推荐使用

pnpm dlx

来执行Mermaid CLI，无需永久全局安装。

验证

mmdc

是否可用：

bash

pnpm dlx @mermaid-js/mermaid-cli --version

Usage

使用方法

Create a Mermaid file: Create a file with

.mmd

extension (e.g.,

diagram.mmd

) containing the Mermaid diagram definition.

Example
diagram.mmd
:

mermaid

flowchart TD
    A[Idea] --> B[AI Agent]
    B --> C[Design]
    C --> D[Code]
    D --> E[Test]
    E --> F[Deploy]

Generate Image: Use

pnpm dlx

to run the Mermaid CLI and convert the

.mmd

file to an image (SVG recommended for scalability).

bash

pnpm dlx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg

For PNG output:

bash

pnpm dlx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png

创建Mermaid文件： 创建一个扩展名为

.mmd

的文件（例如

diagram.mmd

），其中包含Mermaid图表的定义。

示例
diagram.mmd
：

mermaid

flowchart TD
    A[Idea] --> B[AI Agent]
    B --> C[Design]
    C --> D[Code]
    D --> E[Test]
    E --> F[Deploy]

生成图片： 使用

pnpm dlx

运行Mermaid CLI，将

.mmd

文件转换为图片（推荐使用SVG以保证可缩放性）。

bash

pnpm dlx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg

若要生成PNG格式：

bash

pnpm dlx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png

Common Diagram Types

常见图表类型

Flowchart:
```
flowchart TD
```
(Top-Down) or
```
LR
```
(Left-Right)
Sequence Diagram:
```
sequenceDiagram
```
Class Diagram:
```
classDiagram
```
State Diagram:
```
stateDiagram-v2
```
Entity Relationship Diagram:
```
erDiagram
```

流程图：
```
flowchart TD
```
（自上而下）或
```
LR
```
（自左至右）
时序图：
```
sequenceDiagram
```
类图：
```
classDiagram
```
状态图：
```
stateDiagram-v2
```
实体关系图：
```
erDiagram
```