1# mermaid
2
3sublimated renders `.mmd` and `.mermaid` files as diagrams. push via [git](../git/), view the rendered diagram on the web.
4
5- diagrams are rendered server-side on push — no client-side JavaScript needed
6- the rendered SVG is stored alongside the source, so viewing is instant
7- source code is shown in a collapsible section below the diagram
8- supported on both sublimated.com (file viewer) and run.sublimated.com (published sites)
9- [demo](demo.mmd) — example flowchart, push it to see it rendered
10
11## supported diagram types
12
13all [mermaid.js](https://mermaid.js.org/) diagram types work:
14
15- flowchart / graph
16- sequence diagram
17- class diagram
18- state diagram
19- entity relationship diagram
20- gantt chart
21- pie chart
22- git graph
23- mindmap
24- timeline
25- and more — anything mermaid.js supports
26
27## how it works
28
291. push a `.mmd` or `.mermaid` file via git
302. sublimated detects the file type and sends it to the mermaid renderer
313. the rendered SVG is stored in CAS as a `render_svg` representation
324. when you view the file, the SVG is displayed with a collapsible source view
33
34## embedding in markdown
35
36mermaid code blocks in markdown files are also rendered:
37
38````
39```mermaid
40graph LR
41    A --> B
42```
43````
44
45this uses client-side rendering (mermaid.js loaded in the browser). standalone `.mmd` files use server-side rendering instead.