space-mermaid-diagram

Mermaid Generator

Convert any text, description, or workflow into clear and concise Mermaid diagrams.

Core Capabilities

1. Intelligent Structure Recognition - Extract logical relationships and process steps from text
2. Multiple Diagram Types - Supports flowchart, sequence, class diagram
3. Clear and Concise - Use emoji and icons to enhance readability
4. Batch Generation - Complex logic can be split into multiple related diagrams
5. Automatic Categorized Saving - Save into folders by MMDD-topic

Supported Diagram Types

Type	Applicable Scenarios	Trigger Words
Flowchart	Workflows, decision trees, system processes	flowchart, workflow
Sequence	Sequence interactions, API calls, user journeys	sequence diagram, interaction flow
Class	System architecture, data models, class relationships	architecture diagram, class diagram

Workflow

Step 1: Analyze the input content

Identify:

• Content Type: workflow/interaction flow/system architecture
• Core Entities: main roles/systems/modules
• Logical Relationships: sequence/branch/loop/dependency
• Complexity: whether it needs to be split into multiple diagrams

Step 2: Choose the diagram type

Automatic Selection Rules：

• Sequential process + branch decisions → Flowchart
• Multi-party interaction + chronological order → Sequence
• Module relationships + inheritance and composition → Class

User can specify：

用户：生成流程图
用户：用时序图展示
用户：创建类图

Step 3: Design the diagram structure

Flowchart Design Principles：

• Use flowchart LR/TB direction
• Concise node naming (Chinese + emoji)
• Use subgraph to group related steps
• Use diamonds for decision points {}
• Use thick arrows for critical paths ==>

Sequence Design Principles：

• Clear participant naming
• Describe each operation in one sentence
• Use Note to supplement key information
• Use dashed lines for asynchronous operations -->

Class Design Principles：

• Use UpperCamelCase for class names
• Display core attributes/methods in simplified form
• Clear relationships (inheritance/composition/dependency)
• Use note to explain design intent

Step 4: Enhance readability

Use Emoji：

📱 应用层
🔧 工具类
📊 数据层
🔐 安全模块
✅ 成功状态
❌ 失败状态
⚙️ 配置
🚀 启动

Color hints(used in subgraph):

flowchart TB
    subgraph input [📥 输入阶段]
        A[用户输入]
    end

    subgraph process [⚙️ 处理阶段]
        B[数据验证]
    end

    subgraph output [📤 输出阶段]
        C[结果展示]
    end

Step 5: Save the file

Directory Structure：

00 收件箱/画板/mermaid流程图/
└── MMDD-主题名/
    ├── 01-主流程图.md
    ├── 02-子流程图.md
    └── README.md  (索引说明)

File Naming：

• Single diagram:MMDD-主题名.md
• Multiple diagrams:MMDD-主题名/序号-子主题.md

File Content Template：

# 主题名 - 图表类型

> 生成时间：YYYY-MM-DD
> 来源：[原文链接或描述]

## 图表说明

[一句话描述这个图表展示什么]

## Mermaid 代码

\`\`\`mermaid
[图表代码]
\`\`\`

## 要点说明

- 关键点 1
- 关键点 2

Usage Examples

Example 1: Simple Process Conversion

Input：

把这个转为流程图：
1. 用户打开 X 书签页面
2. 手动滚动加载
3. 点击下载按钮
4. 选择保存目录
5. 保存为 Markdown 文件

Output：

flowchart LR
    A[📱 用户打开 X 书签] --> B[📜 手动滚动加载]
    B --> C[⬇️ 点击下载]
    C --> D[📁 选择保存目录]
    D --> E[💾 保存 Markdown]

Example 2: Complex System Decomposition

Input：

生成播客处理工作流的流程图，包括：
- 获取更新
- 提取字幕
- 内容处理
- 保存飞书
- 生成图片

Output: Generate 3 diagrams

1. Main Flowchart (Overall Process)
2. Content Processing Subprocess (Detailed Steps)
3. Data Flow Diagram (System Architecture)

Example 3: Sequence Diagram Generation

Input：

用时序图展示用户登录流程

Output：

sequenceDiagram
    actor User as 👤 用户
    participant App as 📱 前端
    participant API as 🔧 后端 API
    participant DB as 💾 数据库

    User->>App: 输入账号密码
    App->>API: POST /login
    API->>DB: 查询用户
    DB-->>API: 返回用户信息
    API-->>App: 返回 Token
    App-->>User: 登录成功

Best Practices

Diagram Simplification Principles

1. One Diagram, One Theme - Don't cram too much content into one diagram
2. 3-7 Rule - 3-7 nodes per subgraph
3. Clear Naming - Node names 3-5 characters
4. Moderate Use of Emoji - 2-3 key positions are enough

Splitting Strategies

When to Split：

• Node count > 15
• There are obvious subprocesses
• Involves multiple systems/roles
• Need to show different levels

How to Split：

• Main process + subprocess
• Business process + technical implementation
• Temporal relationships + module relationships

Save and Organize

Single process：

00 收件箱/画板/mermaid流程图/0202-X推文处理.md

Multiple processes：

00 收件箱/画板/mermaid流程图/0202-播客处理工作流/
├── README.md           # 索引说明
├── 01-主流程.md        # 整体流程
├── 02-内容处理.md      # 子流程
└── 03-系统架构.md      # 架构图

Diagram Quality Check

Self-check after generation:

Flowchart：

• Process direction is clear (LR/TB)
• Decision points use diamonds
• Has start and end
• All branches have clear exits

Sequence：

• Participant names are clear
• Time order is correct
• Asynchronous operations use dashed lines
• Important information has Notes

Class：

• Class names conform to standards
• Relationship types are correct
• Core attributes and methods are shown
• Necessary notes are provided

Trigger Methods

User Wording	Trigger
Generate flowchart	✅
Convert to mermaid	✅
Draw a diagram	✅
Visualize this process	✅
Show with a sequence diagram	✅
Create an architecture diagram	✅

Reference Resources

Detailed syntax reference:references/mermaid-syntax.md