| name | mermaid-dark-theme |
| description | Produce Mermaid diagrams styled with my dark theme — a #171717 canvas, light hairline borders, and a fixed categorical palette via classDef. Use whenever I ask for a Mermaid diagram, flowchart, sequence/state/ER/class diagram, an architecture/system diagram, a README diagram, or say "mermaid", "dark theme diagram", "다이어그램 그려줘", "머메이드", "아키텍처 다이어그램". Default to this dark theme unless I explicitly ask for the default/light Mermaid look. Always emit the `%%{init}%%` header and reuse the canonical classDef library for diagram grammars that support it. |
| user-invocable | true |
Mermaid Dark Theme
A dark-first Mermaid style: near-black canvas, light grey hairlines, light text, and a
small set of reusable category colors applied with classDef. The goal is calm,
high-contrast architecture diagrams that read well on dark README/Obsidian/slide
backgrounds.
When this runs
Any time I want a Mermaid diagram and haven't asked for the stock light theme. Reach for
this for flowcharts, system/architecture diagrams, sequence, state, ER, and class
diagrams. The init theme applies to every diagram type; classDef is only added where
that diagram grammar supports it (most reliably flowcharts).
The canonical header
Start every diagram with this init directive (it must be the first line, on its own):
%%{init: {"theme": "base", "themeVariables": {"background": "#171717", "primaryColor": "#232323", "primaryTextColor": "#f5f5f5", "primaryBorderColor": "#d0d0d0", "lineColor": "#cfcfcf", "fontFamily": "Inter, Arial, sans-serif"}}}%%
- Use
theme: "base" so the canonical palette is not mixed with another built-in theme's
opinionated colors.
- Keep the header on a single line. Mermaid's directive parser is whitespace-sensitive.
Palette
| Token | Hex | Role |
|---|
| background | #171717 | diagram canvas |
| primaryColor | #232323 | default node fill |
| primaryTextColor | #f5f5f5 | node + label text |
| primaryBorderColor | #d0d0d0 | node borders |
| lineColor | #cfcfcf | edges / arrows |
All category fills below pair with stroke:#d0d0d0, color:#f5f5f5, stroke-width:2px.
classDef library — copy these verbatim
classDef input fill:#232323,stroke:#d0d0d0,color:#f5f5f5,stroke-width:2px;
classDef analysis fill:#52676b,stroke:#d0d0d0,color:#f5f5f5,stroke-width:2px;
classDef accent fill:#1b070a,stroke:#d0d0d0,color:#f5f5f5,stroke-width:2px;
classDef music fill:#62164d,stroke:#d0d0d0,color:#f5f5f5,stroke-width:2px;
classDef evidence fill:#173f32,stroke:#d0d0d0,color:#f5f5f5,stroke-width:2px;
classDef render fill:#5a3520,stroke:#d0d0d0,color:#f5f5f5,stroke-width:2px;
classDef planned fill:#3b2f20,stroke:#d0d0d0,color:#f5f5f5,stroke-width:2px,stroke-dasharray:5 5;
What each color signals (rename freely per domain — keep the hex):
- input
#232323 — neutral entry points / sources (same as default fill, just explicit).
- analysis
#52676b — muted teal-grey: processing, compute, transforms.
- accent
#1b070a — deep maroon: the focal / primary actor.
- music
#62164d — magenta: a distinct parallel concern.
- evidence
#173f32 — green: outputs that are trusted / logged / verified.
- render
#5a3520 — warm brown: terminal outputs, UI, artifacts.
- planned
#3b2f20 + dashed border — not-yet-built / future work.
Apply with class A,B input; lines after the classDef block. Use dotted edges
(A -. "label" .-> B) for planned/optional/feedback flows to match the dashed planned
nodes.
Procedure
- Emit the
%%{init}%% header verbatim as line 1.
- Write the diagram body (
flowchart TD, sequenceDiagram, etc.).
- For flowcharts, append only the
classDef lines you actually use, then the
class … ; assignments. For sequence, ER, class, or another grammar, use only syntax
supported by that diagram type; never paste flowchart classDef statements blindly.
- Use solid arrows for real flows, dotted (
-.->) for planned/optional/loops.
- Wrap long node labels with
<br/> instead of letting them overflow.
- Fence the whole thing in a ```mermaid block so it renders in GitHub/Obsidian.
Verify before delivering
Mermaid syntax errors render as a red error box, not a diagram — so confirm it parses:
- Quote any label containing spaces,
/, +, or punctuation: A["Lead Sheet / MIDI"].
- Keep the init directive on one line; a wrapped directive silently disables the theme.
- If a renderer is available (
@mermaid-js/mermaid-cli: mmdc -i d.mmd -o d.svg, or paste
into mermaid.live), render once and eyeball it before calling it done.
Minimal template
%%{init: {"theme": "base", "themeVariables": {"background": "#171717", "primaryColor": "#232323", "primaryTextColor": "#f5f5f5", "primaryBorderColor": "#d0d0d0", "lineColor": "#cfcfcf", "fontFamily": "Inter, Arial, sans-serif"}}}%%
flowchart TD
A["Source"] --> B["Process"]
B --> C["Output"]
B -. "future" .-> D["Planned"]
classDef input fill:#232323,stroke:#d0d0d0,color:#f5f5f5,stroke-width:2px;
classDef analysis fill:#52676b,stroke:#d0d0d0,color:#f5f5f5,stroke-width:2px;
classDef render fill:#5a3520,stroke:#d0d0d0,color:#f5f5f5,stroke-width:2px;
classDef planned fill:#3b2f20,stroke:#d0d0d0,color:#f5f5f5,stroke-width:2px,stroke-dasharray:5 5;
class A input;
class B analysis;
class C render;
class D planned;
A fuller, annotated example lives in assets/example.md.
Guardrails
- Don't drop the
%%{init}%% header — without it rendering falls back to the host/default
Mermaid theme rather than this canonical palette.
- Don't introduce new fills ad hoc; extend the palette deliberately and reuse hexes so
diagrams stay visually consistent across a repo.
- Don't use emoji inside nodes; keep labels plain text with
<br/> line breaks.
- This is a style layer only — it never changes diagram semantics.
