Once enabled from the preferences panel, Typora supports certain Markdown extensions for charts.

These renderings will also be included when exporting to HTML, PDF, EPUB, docX, but images are not supported when exporting Markdown to other file formats in the current version. Also, you should note that charts are not supported by standard Markdown, CommonMark, or GFM. Therefore, we still recommend that you insert images of these graphs instead of writing them directly in Markdown.

Sequence diagram

This feature uses JS-Sequence, which converts the following code blocks into rendered diagrams:

```sequence Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! ` ` `Copy the code

See this syntax note for more details.

The flow chart

This feature uses flowchart.js, which transforms the following code blocks into rendered diagrams:

```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
```
Copy the code

Mermaid

Typora also integrates with Mermaid, which supports sequence diagrams, flow Charts, Gantt Charts, class and status Charts, and pie Charts.

Sequence diagram

See these notes for more details.

```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
```
Copy the code

The flow chart

See these notes for more details.

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

Gantt Charts

See these notes for more details.

```mermaid %% Example with selection of syntaxes gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to S03e05 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 ```Copy the code

The class diagram

See these notes for more details.

```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()
      }
```
Copy the code

State diagram

See these notes for more details.

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

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```
Copy the code

The pie chart

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

reference

Draw Diagrams With Markdown