obsidian-mermaid

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Obsidian Mermaid Diagrams

Obsidian Mermaid 图表

Create Mermaid diagrams that render correctly in Obsidian and publish without issues.

创建可在Obsidian中正确渲染且发布无问题的Mermaid图表。

When to Use This Skill

何时使用此技能

Activate when you need to:

Create flowcharts, sequence diagrams, ER diagrams
Convert ASCII art to Mermaid
Fix Mermaid rendering errors in Obsidian

在以下场景中启用：

创建流程图、时序图、ER图
将ASCII艺术图转换为Mermaid图
修复Obsidian中的Mermaid渲染错误

Core Principle: Simplicity First

核心原则：简洁优先

다이어그램은 한눈에 들어와야 한다

복잡한 다이어그램은 읽기 어렵다. 항상 최소한의 노드와 연결로 핵심만 표현하라.

图表必须一目了然

复杂的图表难以阅读。始终用最少的节点和连接来呈现核心内容。

Node Minimization

节点最小化

Before (9개 노드):

mermaid

flowchart LR
    A[수집] --> B[정리] --> C[보관]
    D[목표] --> E[학습] --> F[실행] --> G[측정] --> H[달성]

After (2개 노드 - 순차 흐름을 노드 내 텍스트로):

mermaid

flowchart LR
    A[수집 → 정리 → 보관]
    B[목표 → 학습 → 실행 → 달성]

优化前（9个节点）:

mermaid

flowchart LR
    A[수집] --> B[정리] --> C[보관]
    D[목표] --> E[학습] --> F[실행] --> G[측정] --> H[달성]

优化后（2个节点 - 用节点内文本表示顺序流程）:

mermaid

flowchart LR
    A[수집 → 정리 → 보관]
    B[목표 → 학습 → 실행 → 달성]

Connection Minimization

连接最小化

핵심 흐름만 표현, 세부사항은 본문에서 설명
노드 5개 이하, 연결선 교차 금지
복잡한 관계는 여러 개의 단순한 다이어그램으로 분리

仅呈现核心流程，细节在正文中说明
节点数量不超过5个，禁止连接线交叉
复杂关系拆分为多个简单图表

Table vs Mermaid 선택

表格 vs Mermaid 选择

형식	용도	예시
테이블	속성-값 매핑, 비교, 옵션	에너지 레벨별 작업
Mermaid	흐름, 프로세스, 피드백 루프	입력→처리→출력
인라인	단순 순차 흐름	`A → B → C`

원칙: 같은 정보를 더 컴팩트하게 표현하는 형식 선택

格式	用途	示例
表格	属性-值映射、对比、选项	按能量级别划分的任务
Mermaid	流程、过程、反馈循环	输入→处理→输出
行内	简单顺序流程	`A → B → C`

原则：选择能更紧凑呈现相同信息的格式

Critical Rules

重要规则

1. NO Markdown in Labels

1. 标签中禁止使用Markdown

Common Errors:

Node["1. First"]     → "Unsupported markdown: list"
Node["Text<br/>More"] → "Unsupported markdown: heading"
Node["## Header"]    → "Unsupported markdown: heading"

Correct:

Node[First]
Node[Text]

Rule: Keep labels plain text. Move complex descriptions outside the diagram.

常见错误:

Node["1. First"]     → "Unsupported markdown: list"
Node["Text<br/>More"] → "Unsupported markdown: heading"
Node["## Header"]    → "Unsupported markdown: heading"

正确写法:

Node[First]
Node[Text]

规则：标签使用纯文本。将复杂说明移至图表外部。

2. Prefer Square Layout (정사각형 레이아웃)

2. 优先选择方形布局

Problem:

flowchart LR

은 너무 넓고,

flowchart TB

는 너무 길어진다.

Solution: TB + 내부 LR 조합으로 정사각형에 가까운 레이아웃 만들기

mermaid

flowchart TB
    subgraph Layer1["레이어 1"]
        direction LR
        A[항목A] ~~~ B[항목B] ~~~ C[항목C]
    end

    subgraph Layer2["레이어 2"]
        direction LR
        D[항목D] ~~~ E[항목E]
    end

    Layer1 --> Layer2

패턴:

```
flowchart TB
```
: 전체 흐름은 위→아래
```
direction LR
```
: 각 subgraph 내부는 가로 배치
```
~~~
```
: 보이지 않는 연결 (화살표 없이 정렬용)

Rule: 세로로 너무 길어지면 subgraph +

direction LR

사용.

问题：

flowchart LR

太宽，

flowchart TB

太长。

解决方案：通过TB + 内部LR组合创建接近方形的布局

mermaid

flowchart TB
    subgraph Layer1["레이어 1"]
        direction LR
        A[항목A] ~~~ B[항목B] ~~~ C[항목C]
    end

    subgraph Layer2["레이어 2"]
        direction LR
        D[항목D] ~~~ E[항목E]
    end

    Layer1 --> Layer2

模式:

```
flowchart TB
```
：整体流程为从上到下
```
direction LR
```
：每个subgraph内部横向排列
```
~~~
```
：不可见连接（用于对齐，无箭头）

规则：如果纵向过长，使用subgraph +

direction LR

。

3. Keep Labels Short

3. 标签保持简短

markdown

❌ Too long:
Node["This is a very long description that will break layout"]

✅ Short and clear:
Node[Short Label]

Rule: Labels should be under 15 characters. Add details in text below the diagram.

markdown

❌ 过长:
Node["This is a very long description that will break layout"]

✅ 简洁清晰:
Node[Short Label]

规则：标签长度控制在15个字符以内。复杂细节放在图表下方的文本中。

4. Avoid Special Characters in Subgraph Names

4. 子图名称避免使用特殊字符

markdown

❌ May cause issues:
subgraph "1. Phase One"
subgraph "Phase: Setup"

✅ Safe:
subgraph Phase_One["Phase One"]
subgraph Setup["Setup Phase"]

markdown

❌ 可能引发问题:
subgraph "1. Phase One"
subgraph "Phase: Setup"

✅ 安全写法:
subgraph Phase_One["Phase One"]
subgraph Setup["Setup Phase"]

Good Examples

优秀示例

Simple Flowchart

简单流程图

mermaid

flowchart TB
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

mermaid

flowchart TB
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Process Flow with Details Outside

带外部细节的流程

mermaid

flowchart TB
    Input[Input] --> Process[Process]
    Process --> Output[Output]

Process Details:

Input: User data from form
Process: Validation and transformation
Output: Saved to database

mermaid

flowchart TB
    Input[Input] --> Process[Process]
    Process --> Output[Output]

流程细节:

Input: 来自表单的用户数据
Process: 验证与转换
Output: 保存至数据库

Subgraph Example

子图示例

mermaid

flowchart TB
    subgraph Frontend["Frontend"]
        UI[UI] --> API[API Call]
    end
    subgraph Backend["Backend"]
        Server[Server] --> DB[Database]
    end
    API --> Server

mermaid

flowchart TB
    subgraph Frontend["Frontend"]
        UI[UI] --> API[API Call]
    end
    subgraph Backend["Backend"]
        Server[Server] --> DB[Database]
    end
    API --> Server

Bad Examples (Don't Do This)

错误示例（请勿效仿）

Markdown in Labels

标签中使用Markdown

mermaid

flowchart LR
    A["1. Start<br/>with details"] --> B{"2. Decision"}

This will show "Unsupported markdown" errors.

mermaid

flowchart LR
    A["1. Start<br/>with details"] --> B{"2. Decision"}

这会显示"Unsupported markdown"错误。

Too Wide

过宽的图表

mermaid

flowchart LR
    A[Very Long Process Name Here] --> B[Another Long Name] --> C[Yet Another] --> D[And More]

This gets cut off on mobile and narrow screens.

mermaid

flowchart LR
    A[Very Long Process Name Here] --> B[Another Long Name] --> C[Yet Another] --> D[And More]

在移动端和窄屏设备上会被截断。

Converting ASCII to Mermaid

将ASCII艺术图转换为Mermaid图

ASCII Art:

┌───────┐     ┌───────┐
│ Start │────→│  End  │
└───────┘     └───────┘

Mermaid:

mermaid

flowchart TB
    Start[Start] --> End[End]

ASCII艺术图:

┌───────┐     ┌───────┐
│ Start │────→│  End  │
└───────┘     └───────┘

Mermaid图:

mermaid

flowchart TB
    Start[Start] --> End[End]

Quality Checklist

质量检查清单

Before completing diagram creation:

No
```
<br/>
```
tags in node labels
No numbered list format (
```
1.
```
,
```
2.
```
) in labels
정사각형 레이아웃: TB + subgraph 내 LR 조합 사용
All labels are short (under 15 characters)
Complex details moved to text outside diagram
No special characters in subgraph names
Tested rendering in Obsidian preview

完成图表创建前，请检查：

节点标签中无
```
<br/>
```
标签
标签中无编号列表格式（
```
1.
```
、
```
2.
```
）
方形布局：使用TB + 子图内LR的组合
所有标签简短（15字符以内）
复杂细节移至图表外部的文本中
子图名称无特殊字符
已在Obsidian预览中测试渲染效果