Typora

A Markdown editor that extends the capabilities of GitHub Flavored Markdown, adding support for \LaTeX and diagrams.

LaTeX

Attention

\LaTeX must be enabled in the Typora Preferences for it to work.

To enable it, navigate to File > Preferences > Markdown and enable Inline Math under Syntax Support.

Text Mode ($)

What you type What you get
The identity matrix is $\left[\begin{array}{cc} 1 & 0\\0 & 1\end{array}\right]$. The identity matrix is \left[\begin{array}{cc} 1 & 0\\0 & 1\end{array}\right].

To typeset mathematical symbols and/or equations together with text, place \LaTeX code between a pair of dollar symbols ($).

Math Mode ($$)

What you type What you get
$$e = mc^{2}$$ e = mc^{2}

To typeset mathematical symbols and/or equations in a single block, place \LaTeX code between a pair of two dollar symbols ($$).

Diagrams

Info

Diagrams must be enabled in the Typora Preferences for it to work.

To enable it, navigate to File > Preferences > Markdown and enable Diagrams under Syntax Support.

The following are examples of diagrams that can be created in Typora.

UML Sequence

Syntax:

1
2
3
4
5
​```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
```

UML

Flowchart

Syntax:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

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

Flowchart

Class Diagram

Syntax:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
```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()
      }
```

class diagram

State Diagram

Syntax:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
```mermaid
stateDiagram
    [*] --> Still
    Still --> [*]

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

state diagram

Pie Chart

Syntax:

1
2
3
4
5
6
7
```mermaid
pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150
```

state diagram

````