编写含 Mermaid 图表的 .md 文件时的强制规范，确保 Obsidian + GitHub 兼容。
编写
.md文档前必须先调用此 Skill。
%%{init: {"theme": "base", "flowchart": {"curve": "linear", "useMaxWidth": true, "wrappingWidth": 250}}}%%
flowchart TD
| 编号 | 名称 | 场景 |
|---|---|---|
| 1 | Flat Icon | 博客文档 |
| 2 | Dark Terminal（默认） | GitHub README |
| 3 | Blueprint | 架构图 |
| 4 | Notion Clean | Wiki |
| 5 | Glassmorphism | 演示 |
| 6 | Claude Official | AI 系统 |
| 7 | OpenAI Official | 对外文档 |
TD<br/> 而非 fa:fa-* 图标---
name: mermaid
description: "ALWAYS invoke this skill when generating or editing any markdown (.md) document. Provides mandatory rules for: (1) Mermaid diagram styling — dark-fill/light-stroke classDef, %%{init}%% wrappingWidth, TD direction, <br/> multi-line labels, subgraph fill:none; (2) Obsidian viewport compatibility — no horizontal scrollbar, max-width fit; (3) GitHub renderer compatibility — no Font Awesome icons. Must be loaded before writing any .md file that contains or will contain Mermaid diagrams."
license: MIT
metadata:
version: "3.0"
source: https://smithery.ai/skills/BfdCampos/mermaid
references: https://github.com/yizhiyanhua-ai/fireworks-tech-graph
author: BfdCampos + yizhiyanhua-ai
---
# Mermaid Diagram Skill v3.0
Optimized for **Obsidian** and **GitHub** — high-contrast, viewport-fit, semantic arrows, 7 style presets.
---
## Standard Init Header (EVERY flowchart)
%%{init: {
"theme": "base",
"flowchart": {
"curve": "linear",
"useMaxWidth": true,
"wrappingWidth": 250,
"nodeSpacing": 50,
"rankSpacing": 70,
"padding": 15,
"diagramPadding": 25
}
} }%%
flowchart TD
| Parameter | Value | Why |
|-----------|-------|-----|
| `theme` | `"base"` | Only theme allowing full `classDef` customization |
| `curve` | `"linear"` | Clean straight connectors, no visual noise |
| `useMaxWidth` | `true` | Scales to container — no horizontal scrollbar |
| `wrappingWidth` | `250` | Text wraps at 250px — prevents overflow |
| `nodeSpacing` | `50` | Horizontal breathing room |
| `rankSpacing` | `70` | Vertical breathing room |
| `padding` | `15` | Text doesn't touch node border |
| `diagramPadding` | `25` | Outer margin around diagram |
---
## 7 Style Presets
Choose a style by name when generating. Each preset is a complete `classDef` bundle.
### Style 1 — Flat Icon (light, universal)
Best for: blogs, documentation, slides.
classDef primary fill:#1e3a5f,stroke:#2563eb,stroke-width:1.5px,color:#fff
classDef success fill:#14532d,stroke:#16a34a,stroke-width:1.5px,color:#fff
classDef warning fill:#78350f,stroke:#d97706,stroke-width:1.5px,color:#fff
classDef danger fill:#7f1d1d,stroke:#dc2626,stroke-width:1.5px,color:#fff
classDef neutral fill:#1f2937,stroke:#d1d5db,stroke-width:1.5px,color:#fff
classDef async fill:#2e1065,stroke:#9333ea,stroke-width:1.5px,color:#fff
### Style 2 — Dark Terminal (dark, dev-focused)
Best for: GitHub README, engineering docs, technical reference.
classDef primary fill:#0f0f1a,stroke:#7c3aed,stroke-width:2px,color:#e2e8f0
classDef success fill:#052e16,stroke:#22c55e,stroke-width:2px,color:#e2e8f0
classDef warning fill:#431407,stroke:#ea580c,stroke-width:2px,color:#e2e8f0
classDef danger fill:#450a0a,stroke:#ef4444,stroke-width:2px,color:#e2e8f0
classDef neutral fill:#0f172a,stroke:#475569,stroke-width:2px,color:#94a3b8
classDef async fill:#1e1b4b,stroke:#818cf8,stroke-width:2px,color:#e2e8f0
### Style 3 — Blueprint (dark navy, engineering)
Best for: architecture diagrams, system design, hardware docs.
classDef primary fill:#0a1628,stroke:#00b4d8,stroke-width:2px,color:#caf0f8
classDef success fill:#042f2e,stroke:#2dd4bf,stroke-width:2px,color:#ccfbf1
classDef warning fill:#1c1007,stroke:#fbbf24,stroke-width:2px,color:#fef3c7
classDef danger fill:#1a0505,stroke:#f87171,stroke-width:2px,color:#fee2e2
classDef neutral fill:#0f1f35,stroke:#90e0ef,stroke-width:1.5px,color:#caf0f8
classDef async fill:#0d1b2a,stroke:#48cae4,stroke-width:2px,color:#90e0ef
### Style 4 — Notion Clean (minimal, wiki)
Best for: internal docs, wikis, product specs.
classDef primary fill:#1e3a5f,stroke:#3b82f6,stroke-width:1px,color:#fff
classDef success fill:#14532d,stroke:#86efac,stroke-width:1px,color:#fff
classDef warning fill:#78350f,stroke:#fde68a,stroke-width:1px,color:#fff
classDef danger fill:#7f1d1d,stroke:#fca5a5,stroke-width:1px,color:#fff
classDef neutral fill:#1f2937,stroke:#e5e7eb,stroke-width:1px,color:#f9fafb
classDef async fill:#3b0764,stroke:#d8b4fe,stroke-width:1px,color:#fff
### Style 5 — Glassmorphism (dark, presentations)
Best for: slides, demos, showcase docs.
classDef primary fill:#1e3a8a,stroke:#58a6ff,stroke-width:2px,color:#dbeafe
classDef success fill:#064e3b,stroke:#34d399,stroke-width:2px,color:#d1fae5
classDef warning fill:#7c2d12,stroke:#fb923c,stroke-width:2px,color:#ffedd5
classDef danger fill:#7f1d1d,stroke:#f87171,stroke-width:2px,color:#fee2e2
classDef neutral fill:#1e293b,stroke:#bc8cff,stroke-width:2px,color:#e0e7ff
classDef async fill:#312e81,stroke:#a5b4fc,stroke-width:2px,color:#e0e7ff
### Style 6 — Claude Official (warm cream, Anthropic style)
Best for: AI system architecture, agent docs.
classDef primary fill:#1a3a4a,stroke:#a8c5e6,stroke-width:2.5px,color:#fff
classDef success fill:#1a3a32,stroke:#9dd4c7,stroke-width:2.5px,color:#fff
classDef warning fill:#3a2a10,stroke:#f4e4c1,stroke-width:2.5px,color:#fff
classDef danger fill:#3a1a1a,stroke:#e8c5c5,stroke-width:2.5px,color:#fff
classDef neutral fill:#2a2a2a,stroke:#e8e6e3,stroke-width:2.5px,color:#fff
classDef async fill:#1e2a3a,stroke:#b8d4e8,stroke-width:2.5px,color:#fff
### Style 7 — OpenAI Official (clean white-based)
Best for: product documentation, external-facing docs.
classDef primary fill:#0a2a20,stroke:#10a37f,stroke-width:2px,color:#fff
classDef success fill:#042f1e,stroke:#34d399,stroke-width:2px,color:#d1fae5
classDef warning fill:#291500,stroke:#f59e0b,stroke-width:2px,color:#fef3c7
classDef danger fill:#270000,stroke:#ef4444,stroke-width:2px,color:#fee2e2
classDef neutral fill:#111111,stroke:#6e6e80,stroke-width:2px,color:#e5e5e5
classDef async fill:#0d0d1a,stroke:#8b5cf6,stroke-width:2px,color:#ede9fe
**Default style when not specified: Style 2 (Dark Terminal).**
---
## Semantic Arrow Types
Use `linkStyle` to encode arrow meaning. Number arrows from 0 in order of definition.
A -->|"数据流"| B %% index 0 — primary data
B -.->|"异步事件"| C %% index 1 — async
C ==>|"写入"| D %% index 2 — write / strong
linkStyle 0 stroke:#2563eb,stroke-width:2px
linkStyle 1 stroke:#9333ea,stroke-width:1.5px,stroke-dasharray:4 2
linkStyle 2 stroke:#16a34a,stroke-width:2.5px
| Meaning | Mermaid syntax | Color | Width |
|---------|---------------|-------|-------|
| Primary data flow | `-->` | `#2563eb` blue | 2px |
| Memory / write | `==>` | `#16a34a` green | 2.5px |
| Async / event | `-.->` | `#9333ea` purple | 1.5px dashed |
| Feedback / loop | `-.->` | `#ea580c` orange | 1.5px dashed |
| Error / rejection | `-->` | `#dc2626` red | 1.5px |
| Control flow | `-->` | `#0891b2` teal | 2px |
---
## Shape Vocabulary (Semantic Meanings)
| Meaning | Mermaid shape | Syntax |
|---------|--------------|--------|
| Agent / Orchestrator | Hexagon | `{{Agent}}` |
| LLM / AI Model | Subroutine | `[[Model]]` |
| Database / Vector Store | Cylinder | `[(DB)]` |
| Queue / Stream | Stadium | `([Queue])` |
| Decision / Branch | Diamond | `{Decision?}` |
| Tool / Function | Rectangle | `[Tool]` |
| User / Actor | Circle | `((User))` |
| Start / End terminal | Stadium | `([Start])` |
| Memory / Cache | Asymmetric | `>Memory]` |
| Document / File | Lean rect | `[/Doc/]` |
| API / Gateway | Trapezoid | `[/API\]` |
| Container / Group | Subgraph | `subgraph` |
---
## Product & Service Color Codes
Use these as `classDef` fills for tech stack diagrams.
classDef kafka fill:#231F20,stroke:#E8E8E8,stroke-width:2px,color:#fff
classDef postgres fill:#336791,stroke:#8BC0E0,stroke-width:2px,color:#fff
classDef redis fill:#7a1a0e,stroke:#DC382D,stroke-width:2px,color:#fff
classDef aws fill:#1a0f00,stroke:#FF9900,stroke-width:2px,color:#fff
classDef gcp fill:#0d1f4a,stroke:#4285F4,stroke-width:2px,color:#fff
classDef azure fill:#001a3a,stroke:#0089D6,stroke-width:2px,color:#fff
classDef docker fill:#001a3a,stroke:#2496ED,stroke-width:2px,color:#fff
classDef k8s fill:#001a3a,stroke:#326CE5,stroke-width:2px,color:#fff
classDef anthropic fill:#2a1f14,stroke:#a8c5e6,stroke-width:2px,color:#f8f6f3
classDef openai fill:#042f1e,stroke:#10a37f,stroke-width:2px,color:#fff
classDef pinecone fill:#0a0a2e,stroke:#1C17FF,stroke-width:2px,color:#fff
classDef mongo fill:#0d2a14,stroke:#47A248,stroke-width:2px,color:#fff
classDef influx fill:#1a0828,stroke:#9B19F5,stroke-width:2px,color:#fff
classDef mqtt fill:#0f1f2e,stroke:#00b4d8,stroke-width:2px,color:#fff
---
## Text Overflow Prevention
%% WRONG
A["First line\nSecond line"]
%% CORRECT — use
A["First line
Second line"]
- Cap labels: **~20 Chinese chars** / **~30 English chars** per line
- Subgraph titles: **≤15 chars** (don't respect `wrappingWidth`)
- Long labels → split with `<br/>` rather than widening nodes
---
## Layout Rules (Obsidian Viewport)
Obsidian pane: **700–900px wide**.
1. **Always `TD`** — `LR` only for ≤4 short-label nodes
2. **Chain subgraphs vertically** — connect via explicit edges, not as peers
3. **Max 3 parallel nodes per rank** if labels are long
4. **Split at 18 nodes** — two diagrams with a heading between them
5. **Subgraph style**: `fill:none`, `stroke` = semantic color, `color` = same as stroke
---
## Subgraph Template
subgraph GRP["Group Name"]
style GRP fill:none,stroke:#7aa2f7,stroke-width:1.5px,color:#7aa2f7
A(["Node A"])
B["Node B"]
end
---
## GitHub Compatibility
- No `fa:fa-*` icons
- No HTML tags other than `<br/>` in labels
- Hex colors only in `classDef`
- No inline `style` on nodes — use `classDef` + `class`
---
## Complete Template (Style 2 — Dark Terminal)
```mermaid
%%{init: {
"theme": "base",
"flowchart": {
"curve": "linear",
"useMaxWidth": true,
"wrappingWidth": 250,
"nodeSpacing": 50,
"rankSpacing": 70,
"padding": 15,
"diagramPadding": 25
}
} }%%
flowchart TD
classDef primary fill:#0f0f1a,stroke:#7c3aed,stroke-width:2px,color:#e2e8f0
classDef success fill:#052e16,stroke:#22c55e,stroke-width:2px,color:#e2e8f0
classDef warning fill:#431407,stroke:#ea580c,stroke-width:2px,color:#e2e8f0
classDef danger fill:#450a0a,stroke:#ef4444,stroke-width:2px,color:#e2e8f0
classDef neutral fill:#0f172a,stroke:#475569,stroke-width:2px,color:#94a3b8
classDef async fill:#1e1b4b,stroke:#818cf8,stroke-width:2px,color:#e2e8f0
subgraph INPUT["输入层"]
style INPUT fill:none,stroke:#7c3aed,stroke-width:1.5px,color:#7c3aed
A(["用户请求"])
B["参数验证<br/>格式检查"]
end
subgraph PROC["处理层"]
style PROC fill:none,stroke:#22c55e,stroke-width:1.5px,color:#22c55e
C{"数据有效？"}
D["核心处理<br/>业务逻辑"]
end
E(["返回结果"])
F["记录错误<br/>通知告警"]
A --> B --> C
C -->|"是"| D --> E
C -->|"否"| F
class A,B neutral
class C warning
class D primary
class E success
class F danger
%%{init}%% with theme:"base", curve:"linear", useMaxWidth:true, wrappingWidth:250classDef bundle matches chosen styleTDclass assignments at bottom for all nodes<br/> for multi-line, labels ≤20 Chinese chars/linefill:none, stroke + color = semanticlinkStyle)classDef used for tech stack nodesfa:fa-*, no color names, no inline node styles