将 .mmd 文件渲染为高质量 SVG 或 ASCII 输出。
mermaid Skill 规范语法pretty-mermaid 渲染输出| 格式 | 用途 |
|---|---|
| SVG | 矢量图，用于浏览器和文档 |
| ASCII | 纯文本终端展示 |
---
name: pretty-mermaid
description: "Render Mermaid diagrams to high-quality SVG or ASCII. Use when the user asks to render or export .mmd files to SVG/PNG. For authoring Mermaid diagrams inside .md documents, use the mermaid skill first for styling rules, then this skill to render the output files."
license: MIT
metadata:
version: "1.1"
source: https://github.com/imxv/Pretty-mermaid-skills
author: imxv
---
# Pretty Mermaid Skill
Render Mermaid diagrams to SVG or ASCII using Node.js scripts in this skill's `scripts/` directory.
## Diagram Authoring Rules (from BfdCampos/mermaid)
Before rendering, all diagrams MUST follow these rules to ensure GitHub/Obsidian compatibility:
### Core Style Rule
**Dark fills + light strokes** — readable in both light and dark mode.
classDef myStyle fill:#DARK_COLOUR,stroke:#LIGHT_COLOUR,stroke-width:2px,color:#fff
### Color Palette
| Name | Fill | Stroke |
|--------|-----------|-----------|
| grey | `#374151` | `#d1d5db` |
| purple | `#4c1d95` | `#a78bfa` |
| blue | `#1e3a5f` | `#7aa2f7` |
| orange | `#92400e` | `#fbbf24` |
| green | `#166534` | `#4ade80` |
| red | `#7f1d1d` | `#f87171` |
| teal | `#134e4a` | `#2dd4bf` |
### Obsidian Viewport Rules
Obsidian pane is typically 700–900px wide. Apply these rules to avoid horizontal scrollbars:
- **Always use `TD`**, not `LR`, for complex diagrams
- **Add `%%{init}%%`** at the top of every flowchart:
%%{init: {'flowchart': {'wrappingWidth': 180}}}%%
flowchart TD
- **Split long labels** with `<br/>` to keep nodes narrow
- **Split diagrams** with >20 nodes into two separate blocks
### Syntax Requirements
| Rule | Correct | Wrong |
|------|---------|-------|
| Init directive | `%%{init: {'flowchart': {'wrappingWidth': 180}}}%%` | *(omitting)* |
| Direction | `flowchart TD` | `flowchart LR` (for complex diagrams) |
| Multi-line labels | `["Line 1<br/>Line 2"]` | `["Line 1\nLine 2"]` |
| Subgraph with spaces | `subgraph G["My Group"]` | `subgraph My Group` |
| Subgraph background | `style G fill:none,stroke:#7aa2f7` | *(omitting style)* |
| Icons | *(omit)* | `fa:fa-check` |
| Node shape | `([text])` `((text))` | `[text]` *(sparingly)* |
### classDef Template
```mermaid
flowchart TD
classDef primary fill:#1e3a5f,stroke:#7aa2f7,stroke-width:2px,color:#fff
classDef success fill:#166534,stroke:#4ade80,stroke-width:2px,color:#fff
classDef warning fill:#92400e,stroke:#fbbf24,stroke-width:2px,color:#fff
classDef danger fill:#7f1d1d,stroke:#f87171,stroke-width:2px,color:#fff
classDef neutral fill:#374151,stroke:#d1d5db,stroke-width:2px,color:#fff
classDef purple fill:#4c1d95,stroke:#a78bfa,stroke-width:2px,color:#fff
classDef teal fill:#134e4a,stroke:#2dd4bf,stroke-width:2px,color:#fff
Scripts are at: ~/.claude/skills/pretty-mermaid/scripts/
render.mjs — single diagram renderingbatch.mjs — batch directory renderingthemes.mjs — list available themesDependency: The scripts auto-install beautiful-mermaid via npm on first run if not present.
| Type | Mermaid keyword |
|---|---|
| Flowchart | graph TD / flowchart LR |
| Sequence | sequenceDiagram |
| State | stateDiagram-v2 |
| Class | classDiagram |
| ER | erDiagram |
node "C:/Users/xiaodong.ma/.claude/skills/pretty-mermaid/scripts/render.mjs" \
--input diagram.mmd \
--output diagram.svg \
--theme tokyo-night
node "C:/Users/xiaodong.ma/.claude/skills/pretty-mermaid/scripts/render.mjs" \
--input diagram.mmd \
--format ascii
node "C:/Users/xiaodong.ma/.claude/skills/pretty-mermaid/scripts/batch.mjs" \
--input-dir ./diagrams \
--output-dir ./output \
--theme dracula \
--workers 4
node "C:/Users/xiaodong.ma/.claude/skills/pretty-mermaid/scripts/themes.mjs"
Dark (recommended for docs):
tokyo-night — modern, vibrant purple/bluetokyo-night-storm — deeper variantdracula — high-contrast purplegithub-dark — familiar GitHub stylecatppuccin-mocha — soft darknord — cool arctic tonesone-dark — Atom editor stylesolarized-darkzinc-darkLight:
github-lightcatppuccin-lattenord-lighttokyo-night-lightsolarized-lightzinc-light| Option | Description |
|---|---|
-i, --input <file> |
Input .mmd file (required) |
-o, --output <file> |
Output file (stdout if omitted) |
-f, --format |
svg (default) or ascii |
-t, --theme <name> |
Preset theme name |
--bg <hex> |
Background color |
--fg <hex> |
Foreground/text color |
--line <hex> |
Edge/connector color |
--accent <hex> |
Arrow and highlight color |
--transparent |
Transparent SVG background |
--font <name> |
Font family (default: Inter) |
classDef, <br/>, fill:none subgraphs).mmd filerender.mjs with appropriate themebeautiful-mermaid auto-installs (~10s wait)tokyo-night or github-darkgithub-lightdracula