Diagram Options

Left Align Diagrams

You can add below custom CSS following Add Custom CSS to left align your diagram.

.md-diagram-panel-preview {text-align:left;}

Config Sequence Diagrams

Please refer here for introductions about sequence diagram.

You could change CSS variable --sequence-theme to set theme for sequence diagrams, supported value are simple (default) and hand. For example, add following CSS in Custom CSS, and you will get:

:root {
  --sequence-theme: hand
}

–sequence-theme: simple	–sequence-theme: hand

Config Mermaid Diagrams

Global Config

You can change Mermaid options by adding Custom CSS, supported options include:

:root {
  --mermaid-theme: default; /*or base, dark, forest, neutral, night */
  --mermaid-font-family: "trebuchet ms", verdana, arial, sans-serif;
  --mermaid-sequence-numbers: off; /* or "on", see https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequencenumbers*/
  --mermaid-flowchart-curve: linear /* or "basis", see https://github.com/typora/typora-issues/issues/1632*/;
  --mermaid--gantt-left-padding: 75; /* see https://github.com/typora/typora-issues/issues/1665*/
}

Please note that if you export document with other themes than currently used one, some mermaid options will not be applied to exported HTML / PDF / Image. For example, if you currently use them Github, but while export to PDF, you set theme YYY for PDF export, and YYY.css defines --mermaid-sequence-numbers: on, then the --mermaid-sequence-numbers: on would not be applied to exported PDF.

Mermaid Theme

Added --mermaid-theme css variable to quickly define a mermaid theme that fits your theme, the value can be base, default, dark, forest, neutral, night (the one used in night theme), for example:

CSS	Mermaid Demo
:root {--mermaid-theme:dark;}
:root {--mermaid-theme:neutral;}
:root {--mermaid-theme:forest;}

Auto Numbering

Add --mermaid-sequence-numbers: on; in Custom CSS will enable auto numbering for sequence in mermaid:

–mermaid-sequence-numbers:off	–mermaid-sequence-numbers:on

Flowchart Curve

Add --mermaid-flowchart-curve: basis to get other type of curves.

–mermaid-flowchart-curve: linear;	–mermaid-flowchart-curve: basis	–mermaid-flowchart-curve: natural;	–mermaid-flowchart-curve: step;

Gantt Padding

–mermaid–gantt-left-padding:75	–mermaid–gantt-left-padding:200

Inline Mermaid Config

You can add %%{init: [options]}%% in the first line of mermaid diagram to config mermaid details like below:

You can find full document on https://mermaid-js.github.io/mermaid/#/./directives.