mermaid-pastel-style

📁 mpurbo/purbo-skills 📅 1 day ago

总安装量

周安装量

安装命令

npx skills add https://github.com/mpurbo/purbo-skills --skill mermaid-pastel-style

Agent 安装分布

amp 1

cline 1

opencode 1

cursor 1

kimi-cli 1

codex 1

Skill 文档

Mermaid Diagram Color Style Guide

When creating or editing mermaid diagrams, apply this pastel color palette using the %%{init}%% directive and per-node style directives.

Init Directive (Required)

Every mermaid block must start with this line immediately after the opening fence:

%%{init:{'theme':'base','themeVariables':{'primaryTextColor':'#1e293b','lineColor':'#475569','edgeLabelBackground':'#ffffff','tertiaryTextColor':'#1e293b'}}}%%

This ensures:

Node text: dark slate (#1e293b) â readable on pastel backgrounds
Arrow/line color: dark grey (#475569) â visible connectors
Edge label background: white (#ffffff) â clean label readability
Edge label text: dark slate (#1e293b) â black text on white background

Color Palette by Node Semantic Role

All node styles must include color:#1e293b for readable text.

Role	Fill	Stroke	Use For
Process / Action	`#f3e8ff`	`#7c3aed`	Steps, tasks, operations, computations
Decision	`#fef3c7`	`#d97706`	Yes/no questions, validation checks, conditionals
Routing / Flow Control	`#e0e7ff`	`#4f46e5`	Loop conditions, “more items?” checks, navigation
Success / Terminal	`#d1fae5`	`#059669`	Completion, done, exit success, output artifacts
Error / Failure	`#fee2e2`	`#dc2626`	Failures, error exits, log failures
External / IO	`#fef3c7`	`#d97706`	External APIs, third-party services
Interface / Trait	`#e0e7ff`	`#4f46e5`	Trait definitions, abstract interfaces
Implementation	`#dbeafe`	`#2563eb`	Concrete implementations, provider-specific blocks
Start / Entry	`#e0e7ff`	`#4f46e5`	Entry points, start nodes

Subgraph Styling

Subgraphs use dashed borders with no fill. Assign distinct stroke colors to differentiate groups:

style subgraph_a fill:none,stroke:#7c3aed,stroke-dasharray: 5 5,stroke-width:2px,color:#7c3aed
style subgraph_b fill:none,stroke:#2563eb,stroke-dasharray: 5 5,stroke-width:2px,color:#2563eb
style subgraph_c fill:none,stroke:#059669,stroke-dasharray: 5 5,stroke-width:2px,color:#059669

Available subgraph stroke colors (cycle through as needed):

#7c3aed (purple)
#2563eb (blue)
#059669 (green)
#d97706 (amber)
#dc2626 (red)

Important: Subgraph IDs must be unquoted identifiers (e.g., subgraph my_group ["Display Label"]), not quoted strings, for style directives to work.

Example

%%{init:{'theme':'base','themeVariables':{'primaryTextColor':'#1e293b','lineColor':'#475569','edgeLabelBackground':'#ffffff','tertiaryTextColor':'#1e293b'}}}%%
flowchart TD
    subgraph phase_a ["Phase A: Capture Intent"]
        A["1. Brain-dump PRD"]
        B["2. AI structures PRD"]
        C{"3. Review PRD â Satisfied?"}
        A --> B
        B --> C
        C -- No --> B
    end

    C -- Yes --> D["4. Done"]

    style phase_a fill:none,stroke:#7c3aed,stroke-dasharray: 5 5,stroke-width:2px,color:#7c3aed

    style A fill:#f3e8ff,stroke:#7c3aed,color:#1e293b
    style B fill:#f3e8ff,stroke:#7c3aed,color:#1e293b
    style C fill:#fef3c7,stroke:#d97706,color:#1e293b
    style D fill:#d1fae5,stroke:#059669,color:#1e293b

Rules

Always start with the %%{init}%% directive for global text/line/label colors.
Always add color:#1e293b to every node style directive for dark text on pastel fills.
Map node roles to palette colors semantically, not randomly.
Place all style lines at the end of the mermaid block, after edge definitions.
Keep consistent within a document â same role = same color across all diagrams.

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台