obsidian-mermaid

Obsidian Mermaid 图表

创建可在 Obsidian 中正确渲染并顺利发布的 Mermaid 图表。

何时使用此技能

在需要以下操作时启用：

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

核心原则：简洁优先

图表应一目了然

复杂的图表难以阅读。始终用尽可能少的节点和连接表达核心内容。

精简节点

之前（9 个节点）：

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

之后（2 个节点——在节点内通过文本表示顺序流程）：

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

精简连接

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

选择表格还是 Mermaid

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

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

---

重要规则

1. 标签中不要使用 Markdown

常见错误：

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

正确写法：

Node[First]
Node[Text]

规则：标签使用纯文本。将复杂描述移到图表外。

2. 优先使用方形布局

问题：flowchart LR 太宽，而 flowchart TB 又会太长。

解决方案：结合 TB 与内部 LR，创建接近方形的布局

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. 标签保持简短

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

✅ Short and clear:
Node[Short Label]

规则：标签应少于 15 个字符。细节写在图表下方的文本中。

4. 避免在 Subgraph 名称中使用特殊字符

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

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

优秀示例

简单流程图

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

将流程细节写在图表外

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

流程细节：

• 输入：来自表单的用户数据
• 处理：验证和转换
• 输出：保存到数据库

Subgraph 示例

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

错误示例（请勿这样做）

标签中使用 Markdown

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

这会导致显示“Unsupported markdown”错误。

图表过宽

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

在手机和窄屏上会被截断。

将 ASCII 转换为 Mermaid

ASCII 艺术图：

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

Mermaid：

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

质量检查清单

完成图表创建前：

• 节点标签中没有 <br/> 标签
• 标签中没有编号列表格式（1.、2.）
• 方形布局：结合使用 TB + subgraph 内部 LR
• 所有标签都很简短（少于 15 个字符）
• 将复杂细节移到图表外的文本中
• Subgraph 名称中没有特殊字符
• 已在 Obsidian 预览中测试渲染效果