Draw Diagrams With Markdown
August 15, 2016 by typora.io
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:
For more details, please see this syntax
explanation.
Flowcharts
This feature uses flowchart.js, which turns the
following code block into a rendered diagram:
Mermaid Diagrams
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.
%% Example of sequence diagram
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
Flowcharts
For more details see these
instructions.
graph LR
A[Hard edge] -->B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
Class Diagrams
For more details see these
instructions.
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
State Diagrams
For more details see these
instructions.
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Pie Charts
pie
title Pie Chart
"Dogs" : 386
"Cats" : 85
"Rats" : 150
More https://mermaid-js.github.io/mermaid/#/