Typora supports some Markdown extensions for diagrams, once they are enabled from preference panel.
When exporting as HTML, PDF, epub, docx, those rendered diagrams will also be included, but diagrams features are not supported when exporting markdown into other file formats in current version. Besides, you should also notice that diagrams is not supported by standard Markdown, CommonMark or GFM. Therefore, we still recommend you to insert an image of these diagrams instead of write them in Markdown directly.
Sequence Diagrams
This feature uses js-sequence, which turns the following code block into a rendered diagram:
&＃96;&＃96;&＃96;mermaid sequenceDiagram Alice->>Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->>Alice: I am good thanks! &＃96;&＃96;&＃96;
For more details, please see this syntax explanation.
Sequence Diagrams Options
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:
This feature uses flowchart.js, which turns the following code block into a rendered diagram:
&＃96;&＃96;&＃96;mermaid flowchat st&＃61;>start: Start op&＃61;>operation: Your Operation cond&＃61;>condition: Yes or No? e&＃61;>endst->op->cond cond(yes)->e cond(no)->op &＃96;&＃96;&＃96;
Mermaid
Typora also has integration with mermaid, which supports sequence diagrams, flowcharts, Gantt charts, class and state diagrams, and pie charts.
Sequence Diagrams
For more details see these instructions.
&＃96;&＃96;&＃96;mermaid %% Example of sequence diagramsequenceDiagramAlice->>Bob: Hello Bob, how are you?alt is sickBob->>Alice: Not so good :(else is wellBob->>Alice: Feeling fresh like a daisyendopt Extra responseBob->>Alice: Thanks for askingend &＃96;&＃96;&＃96;
&＃96;&＃96;&＃96;mermaid %% Example with selection of syntaxesganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram functionality to mermaidsection A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dsection Critical tasksCompleted task in the critical line :crit, done, 2014-01-06,24hImplement parser and jison :crit, done, after des1, 2dCreate tests for parser :crit, active, 3dFuture task in critical line :crit, 5dCreate tests for renderer :2dAdd to mermaid :1dsection DocumentationDescribe gantt syntax :active, a1, after des1, 3dAdd gantt diagram to demo page :after a1 , 20hAdd another diagram to demo page :doc1, after a1 , 48hsection Last sectionDescribe gantt syntax :after doc1, 3dAdd gantt diagram to demo page : 20hAdd another diagram to demo page : 48h &＃96;&＃96;&＃96;
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&＃61;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:
京公网安备 11010802041100号