mermaid-visualizer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mermaid Visualizer

Mermaid 可视化工具

Overview

概述

Convert text content into clean, professional Mermaid diagrams optimized for presentations and documentation. Automatically handles common syntax pitfalls (list syntax conflicts, subgraph naming, spacing issues) to ensure diagrams render correctly in Obsidian, GitHub, and other Mermaid-compatible platforms.

将文本内容转换为简洁、专业的Mermaid图表，优化适配演示文稿和文档。自动处理常见语法陷阱（列表语法冲突、子图命名、空格问题），确保图表能在Obsidian、GitHub及其他支持Mermaid的平台上正确渲染。

Quick Start

快速开始

When creating a Mermaid diagram:

Analyze the content - Identify key concepts, relationships, and flow
Choose diagram type - Select the most appropriate visualization (see Diagram Types below)
Select configuration - Determine layout, detail level, and styling
Generate diagram - Create syntactically correct Mermaid code
Output in markdown - Wrap in proper code fence with optional explanation

Default assumptions:

Vertical layout (TB) unless horizontal requested
Medium detail level (balanced between simplicity and information)
Professional color scheme with semantic colors
Obsidian/GitHub compatible syntax

创建Mermaid图表时：

分析内容 - 识别核心概念、关系和流程
选择图表类型 - 挑选最适合的可视化类型（见下方图表类型）
选择配置项 - 确定布局、详细程度和样式
生成图表 - 创建语法正确的Mermaid代码
以Markdown格式输出 - 用正确的代码块包裹，可附带说明

默认假设：

垂直布局（TB），除非明确要求水平布局
中等详细程度（在简洁性和信息量间取得平衡）
专业配色方案，使用语义化颜色
兼容Obsidian/GitHub的语法

Diagram Types

图表类型

1. Process Flow (graph TB/LR)

1. 流程流程图（graph TB/LR）

Best for: Workflows, decision trees, sequential processes, AI agent architectures

Use when: Content describes steps, stages, or a sequence of actions

Key features:

Swimlanes via subgraph for grouping related steps
Arrow labels for transitions
Feedback loops and branches
Color-coded stages

Configuration options:

```
layout
```
: "vertical" (TB), "horizontal" (LR)
```
detail
```
: "simple" (core steps only), "standard" (with descriptions), "detailed" (with annotations)
```
style
```
: "minimal", "professional", "colorful"

最佳适用场景： 工作流、决策树、顺序流程、AI Agent架构

使用时机： 内容描述步骤、阶段或一系列动作时

核心特性：

通过subgraph实现泳道，用于分组相关步骤
箭头标签标注转换关系
支持反馈循环和分支
按阶段进行颜色编码

配置选项：

```
layout
```
: "vertical"（TB）, "horizontal"（LR）
```
detail
```
: "simple"（仅核心步骤）, "standard"（附带描述）, "detailed"（附带注释）
```
style
```
: "minimal", "professional", "colorful"

2. Circular Flow (graph TD with circular layout)

2. 循环流程图（graph TD 循环布局）

Best for: Cyclic processes, continuous improvement loops, agent feedback systems

Use when: Content emphasizes iteration, feedback, or circular relationships

Key features:

Central hub with radiating elements
Curved feedback arrows
Clear cycle indicators

最佳适用场景： 循环流程、持续改进循环、Agent反馈系统

使用时机： 内容强调迭代、反馈或循环关系时

核心特性：

中心枢纽搭配辐射元素
弧形反馈箭头
清晰的循环标识

3. Comparison Diagram (graph TB with parallel paths)

3. 对比图表（graph TB 平行路径）

Best for: Before/after comparisons, A vs B analysis, traditional vs modern systems

Use when: Content contrasts two or more approaches or systems

Key features:

Side-by-side layout
Central comparison node
Clear differentiation via color/style

最佳适用场景： 前后对比、A/B分析、传统与现代系统对比

使用时机： 内容对比两种或多种方法/系统时

核心特性：

并排布局
中心对比节点
通过颜色/样式清晰区分

4. Mindmap

4. 思维导图

Best for: Hierarchical concepts, knowledge organization, topic breakdowns

Use when: Content is hierarchical with clear parent-child relationships

Key features:

Radial tree structure
Multiple levels of nesting
Clean visual hierarchy

最佳适用场景： 层级概念、知识组织、主题分解

使用时机： 内容为层级结构，存在明确的父子关系时

核心特性：

放射状树状结构
支持多层嵌套
清晰的视觉层级

5. Sequence Diagram

5. 时序图

Best for: Interactions between components, API calls, message flows

Use when: Content involves communication between actors/systems over time

Key features:

Timeline-based layout
Clear actor separation
Activation boxes for processes

最佳适用场景： 组件间交互、API调用、消息流

使用时机： 内容涉及角色/系统间随时间的通信时

核心特性：

基于时间线的布局
清晰的角色分离
流程激活框

6. State Diagram

6. 状态图

Best for: System states, status transitions, lifecycle stages

Use when: Content describes states and transitions between them

Key features:

Clear state nodes
Labeled transitions
Start and end states

最佳适用场景： 系统状态、状态转换、生命周期阶段

使用时机： 内容描述状态及状态间转换时

核心特性：

清晰的状态节点
带标签的转换关系
起始和结束状态

Critical Syntax Rules

关键语法规则

Always follow these rules to prevent parsing errors:

必须遵守以下规则以避免解析错误：

Rule 1: Avoid List Syntax Conflicts

规则1：避免列表语法冲突

❌ WRONG: [1. Perception]       → Triggers "Unsupported markdown: list"
✅ RIGHT: [1.Perception]         → Remove space after period
✅ RIGHT: [① Perception]         → Use circled numbers (①②③④⑤⑥⑦⑧⑨⑩)
✅ RIGHT: [(1) Perception]       → Use parentheses
✅ RIGHT: [Step 1: Perception]   → Use "Step" prefix

❌ 错误：[1. Perception]       → 触发“不支持的Markdown：列表”
✅ 正确：[1.Perception]         → 移除句点后的空格
✅ 正确：[① Perception]         → 使用带圈数字（①②③④⑤⑥⑦⑧⑨⑩）
✅ 正确：[(1) Perception]       → 使用括号
✅ 正确：[Step 1: Perception]   → 使用“Step”前缀

Rule 2: Subgraph Naming

规则2：子图命名

❌ WRONG: subgraph AI Agent Core  → Space in name without quotes
✅ RIGHT: subgraph agent["AI Agent Core"]  → Use ID with display name
✅ RIGHT: subgraph agent          → Use simple ID only

❌ 错误：subgraph AI Agent Core  → 名称含空格但未加引号
✅ 正确：subgraph agent["AI Agent Core"]  → 使用ID加显示名称
✅ 正确：subgraph agent          → 仅使用简单ID

Rule 3: Node References

规则3：节点引用

❌ WRONG: Title --> AI Agent Core  → Reference display name directly
✅ RIGHT: Title --> agent          → Reference subgraph ID

❌ 错误：Title --> AI Agent Core  → 直接引用显示名称
✅ 正确：Title --> agent          → 引用子图ID

Rule 4: Special Characters in Node Text

规则4：节点文本中的特殊字符

✅ Use quotes for text with spaces: ["Text with spaces"]
✅ Escape or avoid: quotation marks → use 『』instead
✅ Escape or avoid: parentheses → use 「」instead
✅ Line breaks in circle nodes only: ((Text<br/>Break))

✅ 含空格的文本使用引号：["Text with spaces"]
✅ 转义或避免使用引号 → 改用『』
✅ 转义或避免使用括号 → 改用「」
✅ 仅圆形节点支持换行：((Text<br/>Break))

Rule 5: Arrow Types

规则5：箭头类型

```
-->
```
solid arrow
```
-.->
```
dashed arrow (for supporting systems, optional paths)
```
==>
```
thick arrow (for emphasis)
```
~~~
```
invisible link (for layout only)

For complete syntax reference and edge cases, see references/syntax-rules.md

```
-->
```
实心箭头
```
-.->
```
虚线箭头（用于支持系统、可选路径）
```
==>
```
粗箭头（用于强调）
```
~~~
```
不可见链接（仅用于布局）

完整语法参考和边缘情况处理，请查看 references/syntax-rules.md

Configuration Options

配置选项

All diagrams accept these parameters:

Layout:

```
direction
```
: "vertical" (TB), "horizontal" (LR), "right-to-left" (RL), "bottom-to-top" (BT)
```
aspect
```
: "portrait" (default), "landscape" (wide), "square"

Detail Level:

```
simple
```
: Core elements only, minimal labels
```
standard
```
: Balanced detail with key descriptions (default)
```
detailed
```
: Full annotations, explanations, and metadata
```
presentation
```
: Optimized for slides (larger text, fewer details)

Style:

```
minimal
```
: Monochrome, clean lines
```
professional
```
: Semantic colors, clear hierarchy (default)
```
colorful
```
: Vibrant colors, high contrast
```
academic
```
: Formal styling for papers/documentation

Additional Options:

```
show_legend
```
: true/false - Include color/symbol legend
```
numbered
```
: true/false - Add sequence numbers to steps
```
title
```
: string - Add diagram title

所有图表均支持以下参数：

布局：

```
direction
```
: "vertical"（TB）, "horizontal"（LR）, "right-to-left"（RL）, "bottom-to-top"（BT）
```
aspect
```
: "portrait"（默认）, "landscape"（宽屏）, "square"

详细程度：

```
simple
```
: 仅核心元素，标签极少
```
standard
```
: 平衡的详细程度，含关键描述（默认）
```
detailed
```
: 完整注释、说明和元数据
```
presentation
```
: 为幻灯片优化（更大字体，更少细节）

样式：

```
minimal
```
: 单色，简洁线条
```
professional
```
: 语义化颜色，清晰层级（默认）
```
colorful
```
: 鲜艳色彩，高对比度
```
academic
```
: 正式样式，适用于论文/文档

附加选项：

```
show_legend
```
: true/false - 包含颜色/符号图例
```
numbered
```
: true/false - 为步骤添加序号
```
title
```
: string - 添加图表标题

Example Usage Patterns

示例使用模式

Pattern 1: Basic request

User: "Visualize the software development lifecycle"
Response: [Analyze → Choose graph TB → Generate with standard detail]

Pattern 2: With configuration

User: "Create a horizontal flowchart of our sales process with lots of detail"
Response: [Analyze → Choose graph LR → Generate with detailed level]

Pattern 3: Comparison

User: "Compare traditional AI vs AI agents"
Response: [Analyze → Choose comparison layout → Generate with contrasting styles]

模式1：基础请求

用户: "可视化软件开发生命周期"
响应: [分析 → 选择graph TB → 生成标准详细程度的图表]

模式2：带配置项的请求

用户: "创建一个水平布局的销售流程流程图，要求详细"
响应: [分析 → 选择graph LR → 生成详细程度的图表]

模式3：对比请求

用户: "对比传统AI与AI Agent"
响应: [分析 → 选择对比布局 → 生成带对比样式的图表]

Workflow

工作流程

Understand the content
- Identify main concepts, entities, and relationships
- Determine hierarchy or sequence
- Note any comparisons or contrasts
Select diagram type
- Match content structure to diagram type
- Consider user's presentation context
- Default to process flow if ambiguous
Choose configuration
- Apply user-specified options
- Use sensible defaults for unspecified options
- Optimize for readability
Generate Mermaid code
- Follow all syntax rules strictly
- Use semantic naming (descriptive IDs)
- Apply consistent styling
- Test for common errors:
  - No "number. space" patterns in node text
  - All subgraphs use ID["display name"] format
  - All node references use IDs not display names
Output with context
- Wrap in ```mermaid code fence
- Add brief explanation of diagram structure
- Mention rendering compatibility (Obsidian, GitHub, etc.)
- Offer to adjust or create variations

理解内容
- 识别核心概念、实体和关系
- 确定层级或顺序
- 记录任何对比或对照信息
选择图表类型
- 匹配内容结构与图表类型
- 考虑用户的演示场景
- 若不确定，默认使用流程流程图
选择配置项
- 应用用户指定的选项
- 对未指定的选项使用合理默认值
- 优化可读性
生成Mermaid代码
- 严格遵守所有语法规则
- 使用语义化命名（描述性ID）
- 应用一致的样式
- 检查常见错误：
  - 节点文本中无“数字. 空格”模式
  - 所有子图使用ID["显示名称"]格式
  - 所有节点引用使用ID而非显示名称
带上下文输出
- 用```mermaid代码块包裹
- 添加图表结构的简要说明
- 提及渲染兼容性（Obsidian、GitHub等）
- 提供调整或创建变体的选项

Color Scheme Defaults

默认配色方案

Standard professional palette:

Green (#d3f9d8/#2f9e44): Input, perception, start states
Red (#ffe3e3/#c92a2a): Planning, decision points
Purple (#e5dbff/#5f3dc4): Processing, reasoning
Orange (#ffe8cc/#d9480f): Actions, tool usage
Cyan (#c5f6fa/#0c8599): Output, execution, results
Yellow (#fff4e6/#e67700): Storage, memory, data
Pink (#f3d9fa/#862e9c): Learning, optimization
Blue (#e7f5ff/#1971c2): Metadata, definitions, titles
Gray (#f8f9fa/#868e96): Neutral elements, traditional systems

标准专业配色：

绿色 (#d3f9d8/#2f9e44): 输入、感知、起始状态
红色 (#ffe3e3/#c92a2a): 规划、决策点
紫色 (#e5dbff/#5f3dc4): 处理、推理
橙色 (#ffe8cc/#d9480f): 动作、工具使用
青色 (#c5f6fa/#0c8599): 输出、执行、结果
黄色 (#fff4e6/#e67700): 存储、内存、数据
粉色 (#f3d9fa/#862e9c): 学习、优化
蓝色 (#e7f5ff/#1971c2): 元数据、定义、标题
灰色 (#f8f9fa/#868e96): 中性元素、传统系统

Common Patterns

常见模式

Swimlane Pattern (Grouping)

泳道模式（分组）

mermaid

graph TB
    subgraph core["Core Process"]
        A --> B --> C
    end
    subgraph support["Supporting Systems"]
        D
        E
    end
    core -.-> support

mermaid

graph TB
    subgraph core["核心流程"]
        A --> B --> C
    end
    subgraph support["支持系统"]
        D
        E
    end
    core -.-> support

Feedback Loop Pattern

反馈循环模式

mermaid

graph TB
    A[Start] --> B[Process]
    B --> C[End]
    C -.->|Feedback| A

mermaid

graph TB
    A[开始] --> B[处理]
    B --> C[结束]
    C -.->|反馈| A

Hub and Spoke Pattern

中心辐射模式

mermaid

graph TB
    Central[Hub]
    A[Spoke 1] --> Central
    B[Spoke 2] --> Central
    C[Spoke 3] --> Central

mermaid

graph TB
    Central[中心枢纽]
    A[分支1] --> Central
    B[分支2] --> Central
    C[分支3] --> Central

Quality Checklist

质量检查清单

References

参考资料

For detailed syntax rules and troubleshooting, see:

references/syntax-rules.md - Complete syntax reference and error prevention

如需详细语法规则和故障排除，请查看：

references/syntax-rules.md - 完整语法参考和错误预防指南