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:

```mermaid
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->>Alice: I am good thanks!
```

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
flowchat
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
```

Mermaid

Typora also has integration with mermaid, which supports sequence diagrams, flowcharts, Gantt charts, class and state diagrams, and pie charts.

For more details see these instructions.

```mermaid
%% 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
```

For more details see these instructions.

```mermaid
graph LR
A[Hard edge] -->B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

For more details see these instructions.

```mermaid
%% Example with selection of syntaxes
        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h
```

For more details see these instructions.

```mermaid
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()
      }
```

For more details see these instructions.

```mermaid
stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

```mermaid
pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150
```

#mermaid-svg-zeXre0Ckzokc0WSF .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-zeXre0Ckzokc0WSF .label text{fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF .node rect,#mermaid-svg-zeXre0Ckzokc0WSF .node circle,#mermaid-svg-zeXre0Ckzokc0WSF .node ellipse,#mermaid-svg-zeXre0Ckzokc0WSF .node polygon,#mermaid-svg-zeXre0Ckzokc0WSF .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-zeXre0Ckzokc0WSF .node .label{text-align:center;fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF .node.clickable{cursor:pointer}#mermaid-svg-zeXre0Ckzokc0WSF .arrowheadPath{fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-zeXre0Ckzokc0WSF .flowchart-link{stroke:#333;fill:none}#mermaid-svg-zeXre0Ckzokc0WSF .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-zeXre0Ckzokc0WSF .edgeLabel rect{opacity:0.9}#mermaid-svg-zeXre0Ckzokc0WSF .edgeLabel span{color:#333}#mermaid-svg-zeXre0Ckzokc0WSF .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-zeXre0Ckzokc0WSF .cluster text{fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-zeXre0Ckzokc0WSF .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-zeXre0Ckzokc0WSF text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-zeXre0Ckzokc0WSF .actor-line{stroke:grey}#mermaid-svg-zeXre0Ckzokc0WSF .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-zeXre0Ckzokc0WSF .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-zeXre0Ckzokc0WSF #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-zeXre0Ckzokc0WSF .sequenceNumber{fill:#fff}#mermaid-svg-zeXre0Ckzokc0WSF #sequencenumber{fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF #crosshead path{fill:#333;stroke:#333}#mermaid-svg-zeXre0Ckzokc0WSF .messageText{fill:#333;stroke:#333}#mermaid-svg-zeXre0Ckzokc0WSF .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-zeXre0Ckzokc0WSF .labelText,#mermaid-svg-zeXre0Ckzokc0WSF .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-zeXre0Ckzokc0WSF .loopText,#mermaid-svg-zeXre0Ckzokc0WSF .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-zeXre0Ckzokc0WSF .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-zeXre0Ckzokc0WSF .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-zeXre0Ckzokc0WSF .noteText,#mermaid-svg-zeXre0Ckzokc0WSF .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-zeXre0Ckzokc0WSF .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-zeXre0Ckzokc0WSF .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-zeXre0Ckzokc0WSF .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-zeXre0Ckzokc0WSF .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-zeXre0Ckzokc0WSF .section{stroke:none;opacity:0.2}#mermaid-svg-zeXre0Ckzokc0WSF .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-zeXre0Ckzokc0WSF .section2{fill:#fff400}#mermaid-svg-zeXre0Ckzokc0WSF .section1,#mermaid-svg-zeXre0Ckzokc0WSF .section3{fill:#fff;opacity:0.2}#mermaid-svg-zeXre0Ckzokc0WSF .sectionTitle0{fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF .sectionTitle1{fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF .sectionTitle2{fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF .sectionTitle3{fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-zeXre0Ckzokc0WSF .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-zeXre0Ckzokc0WSF .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-zeXre0Ckzokc0WSF .grid path{stroke-width:0}#mermaid-svg-zeXre0Ckzokc0WSF .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-zeXre0Ckzokc0WSF .task{stroke-width:2}#mermaid-svg-zeXre0Ckzokc0WSF .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-zeXre0Ckzokc0WSF .taskText:not([font-size]){font-size:11px}#mermaid-svg-zeXre0Ckzokc0WSF .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-zeXre0Ckzokc0WSF .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-zeXre0Ckzokc0WSF .task.clickable{cursor:pointer}#mermaid-svg-zeXre0Ckzokc0WSF .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-zeXre0Ckzokc0WSF .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-zeXre0Ckzokc0WSF .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-zeXre0Ckzokc0WSF .taskText0,#mermaid-svg-zeXre0Ckzokc0WSF .taskText1,#mermaid-svg-zeXre0Ckzokc0WSF .taskText2,#mermaid-svg-zeXre0Ckzokc0WSF .taskText3{fill:#fff}#mermaid-svg-zeXre0Ckzokc0WSF .task0,#mermaid-svg-zeXre0Ckzokc0WSF .task1,#mermaid-svg-zeXre0Ckzokc0WSF .task2,#mermaid-svg-zeXre0Ckzokc0WSF .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-zeXre0Ckzokc0WSF .taskTextOutside0,#mermaid-svg-zeXre0Ckzokc0WSF .taskTextOutside2{fill:#000}#mermaid-svg-zeXre0Ckzokc0WSF .taskTextOutside1,#mermaid-svg-zeXre0Ckzokc0WSF .taskTextOutside3{fill:#000}#mermaid-svg-zeXre0Ckzokc0WSF .active0,#mermaid-svg-zeXre0Ckzokc0WSF .active1,#mermaid-svg-zeXre0Ckzokc0WSF .active2,#mermaid-svg-zeXre0Ckzokc0WSF .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-zeXre0Ckzokc0WSF .activeText0,#mermaid-svg-zeXre0Ckzokc0WSF .activeText1,#mermaid-svg-zeXre0Ckzokc0WSF .activeText2,#mermaid-svg-zeXre0Ckzokc0WSF .activeText3{fill:#000 !important}#mermaid-svg-zeXre0Ckzokc0WSF .done0,#mermaid-svg-zeXre0Ckzokc0WSF .done1,#mermaid-svg-zeXre0Ckzokc0WSF .done2,#mermaid-svg-zeXre0Ckzokc0WSF .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-zeXre0Ckzokc0WSF .doneText0,#mermaid-svg-zeXre0Ckzokc0WSF .doneText1,#mermaid-svg-zeXre0Ckzokc0WSF .doneText2,#mermaid-svg-zeXre0Ckzokc0WSF .doneText3{fill:#000 !important}#mermaid-svg-zeXre0Ckzokc0WSF .crit0,#mermaid-svg-zeXre0Ckzokc0WSF .crit1,#mermaid-svg-zeXre0Ckzokc0WSF .crit2,#mermaid-svg-zeXre0Ckzokc0WSF .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-zeXre0Ckzokc0WSF .activeCrit0,#mermaid-svg-zeXre0Ckzokc0WSF .activeCrit1,#mermaid-svg-zeXre0Ckzokc0WSF .activeCrit2,#mermaid-svg-zeXre0Ckzokc0WSF .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-zeXre0Ckzokc0WSF .doneCrit0,#mermaid-svg-zeXre0Ckzokc0WSF .doneCrit1,#mermaid-svg-zeXre0Ckzokc0WSF .doneCrit2,#mermaid-svg-zeXre0Ckzokc0WSF .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-zeXre0Ckzokc0WSF .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-zeXre0Ckzokc0WSF .milestoneText{font-style:italic}#mermaid-svg-zeXre0Ckzokc0WSF .doneCritText0,#mermaid-svg-zeXre0Ckzokc0WSF .doneCritText1,#mermaid-svg-zeXre0Ckzokc0WSF .doneCritText2,#mermaid-svg-zeXre0Ckzokc0WSF .doneCritText3{fill:#000 !important}#mermaid-svg-zeXre0Ckzokc0WSF .activeCritText0,#mermaid-svg-zeXre0Ckzokc0WSF .activeCritText1,#mermaid-svg-zeXre0Ckzokc0WSF .activeCritText2,#mermaid-svg-zeXre0Ckzokc0WSF .activeCritText3{fill:#000 !important}#mermaid-svg-zeXre0Ckzokc0WSF .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-zeXre0Ckzokc0WSF g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-zeXre0Ckzokc0WSF g.classGroup text .title{font-weight:bolder}#mermaid-svg-zeXre0Ckzokc0WSF g.clickable{cursor:pointer}#mermaid-svg-zeXre0Ckzokc0WSF g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-zeXre0Ckzokc0WSF g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-zeXre0Ckzokc0WSF .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-zeXre0Ckzokc0WSF .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-zeXre0Ckzokc0WSF .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-zeXre0Ckzokc0WSF .dashed-line{stroke-dasharray:3}#mermaid-svg-zeXre0Ckzokc0WSF #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-zeXre0Ckzokc0WSF #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-zeXre0Ckzokc0WSF #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-zeXre0Ckzokc0WSF #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-zeXre0Ckzokc0WSF #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-zeXre0Ckzokc0WSF #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-zeXre0Ckzokc0WSF #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-zeXre0Ckzokc0WSF #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-zeXre0Ckzokc0WSF .commit-id,#mermaid-svg-zeXre0Ckzokc0WSF .commit-msg,#mermaid-svg-zeXre0Ckzokc0WSF .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-zeXre0Ckzokc0WSF .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-zeXre0Ckzokc0WSF .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-zeXre0Ckzokc0WSF g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-zeXre0Ckzokc0WSF g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-zeXre0Ckzokc0WSF g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-zeXre0Ckzokc0WSF g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-zeXre0Ckzokc0WSF g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-zeXre0Ckzokc0WSF .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-zeXre0Ckzokc0WSF .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-zeXre0Ckzokc0WSF .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-zeXre0Ckzokc0WSF .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-zeXre0Ckzokc0WSF .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-zeXre0Ckzokc0WSF .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-zeXre0Ckzokc0WSF .edgeLabel text{fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-zeXre0Ckzokc0WSF .node circle.state-start{fill:black;stroke:black}#mermaid-svg-zeXre0Ckzokc0WSF .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-zeXre0Ckzokc0WSF #statediagram-barbEnd{fill:#9370db}#mermaid-svg-zeXre0Ckzokc0WSF .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-zeXre0Ckzokc0WSF .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-zeXre0Ckzokc0WSF .statediagram-state .divider{stroke:#9370db}#mermaid-svg-zeXre0Ckzokc0WSF .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-zeXre0Ckzokc0WSF .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-zeXre0Ckzokc0WSF .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-zeXre0Ckzokc0WSF .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-zeXre0Ckzokc0WSF .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-zeXre0Ckzokc0WSF .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-zeXre0Ckzokc0WSF .note-edge{stroke-dasharray:5}#mermaid-svg-zeXre0Ckzokc0WSF .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-zeXre0Ckzokc0WSF .error-icon{fill:#522}#mermaid-svg-zeXre0Ckzokc0WSF .error-text{fill:#522;stroke:#522}#mermaid-svg-zeXre0Ckzokc0WSF .edge-thickness-normal{stroke-width:2px}#mermaid-svg-zeXre0Ckzokc0WSF .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-zeXre0Ckzokc0WSF .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-zeXre0Ckzokc0WSF .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-zeXre0Ckzokc0WSF .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-zeXre0Ckzokc0WSF .marker{fill:#333}#mermaid-svg-zeXre0Ckzokc0WSF .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-zeXre0Ckzokc0WSF {
color: rgba(0, 0, 0, 0.75);
font: ;
}

62%

14%

24%

Pie Chart

Dogs

Cats

Rats