d7ff3e62fb825f1af1f15509161d7b806086452e - docs

edit index.md via macOS

M /docs/undefined +53 -0

+ inserted heading styling and themes

+ inserted paragraph all mermaid styling features work — colors, themes, and clas...

+ inserted heading built-in themes

+ inserted paragraph add a directive at the top of your .mmd file:

+ inserted code block %%{init: {'theme': 'dark'}}%% graph TD A --> B

+ inserted paragraph available themes: default, dark, forest, neutral, base

+ inserted heading custom colors with themeVariables

+ inserted paragraph fine-grained control over 100+ color variables:

+ inserted code block %%{init: {'theme': 'base', 'themeVariables': {'primaryColor'...

+ inserted paragraph common variables: primaryColor, primaryBorderColor, lineColo...

+ inserted heading classDef (reusable classes)

+ inserted paragraph define named styles and apply them to nodes:

+ inserted code block classDef green fill:#e8f5e9,stroke:#4caf50 A:::green --> B::...

+ inserted heading inline style (per-node)

+ inserted code block style A fill:#e8f5e9,stroke:#333

+ inserted heading styled demos

+ inserted paragraph same diagram types with themes, classDef, and custom colors:

+ inserted list item flowchart-styled — classDef + themeVariables + inline style

+ inserted list item sequence-styled — custom actor and note colors

+ inserted list item class-styled — neutral theme

+ inserted list item state-styled — forest theme

+ inserted list item er-styled — dark theme

+ inserted list item gantt-styled — custom section and task colors

+ inserted list item pie-styled — custom pie color palette

M /docs/undefined +53 -0


20 unmodified lines
21- [pie](pie.mmd) — pie chart
22- [gitgraph](gitgraph.mmd) — git branch and merge history
23- [mindmap](mindmap.mmd) — hierarchical mind map
24
25## styling and themes
26
27all mermaid styling features work — colors, themes, and classes are baked into the SVG at render time.
28
29### built-in themes
30
31add a directive at the top of your `.mmd` file:
32
33```
34%%{init: {'theme': 'dark'}}%%
35graph TD
36    A --> B
37```
38
39available themes: `default`, `dark`, `forest`, `neutral`, `base`
40
41### custom colors with themeVariables
42
43fine-grained control over 100+ color variables:
44
45```
46%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#e8f5e9', 'lineColor': '#333'}}}%%
47```
48
49common variables: `primaryColor`, `primaryBorderColor`, `lineColor`, `background`, `fontFamily`, `fontSize`. each diagram type has its own variables too (e.g. `actorBkg` for sequence, `sectionBkgColor` for gantt).
50
51### classDef (reusable classes)
52
53define named styles and apply them to nodes:
54
55```
56classDef green fill:#e8f5e9,stroke:#4caf50
57A:::green --> B:::green
58```
59
60### inline style (per-node)
61
62```
63style A fill:#e8f5e9,stroke:#333
64```
65
66### styled demos
67
68same diagram types with themes, classDef, and custom colors:
69
70- [flowchart-styled](flowchart-styled.mmd) — classDef + themeVariables + inline style
71- [sequence-styled](sequence-styled.mmd) — custom actor and note colors
72- [class-styled](class-styled.mmd) — neutral theme
73- [state-styled](state-styled.mmd) — forest theme
74- [er-styled](er-styled.mmd) — dark theme
75- [gantt-styled](gantt-styled.mmd) — custom section and task colors
76- [pie-styled](pie-styled.mmd) — custom pie color palette
77
78## how it works
79
801. push a `.mmd` or `.mermaid` file via git (or save via edit mode)
812. sublimated detects the file type and sends it to the mermaid renderer (Selkie, Rust/WASM)
29 unmodified lines