Diagrams

Rendering diagrams requires WebView2, which is automatically installed on Windows 11 and along with some Microsoft products. Click to install if you see a installation prompt.

Sequence diagrams

Demo:

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!
```

For more details see https://bramp.github.io/js-sequence-diagrams/

Flowcharts

Demo:

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

For more details see http://flowchart.js.org/

Mermaid

OneMark also has integration with mermaid, which supports sequence diagrams, flowcharts, Gantt charts, class and state diagrams, and pie charts. For more details see https://mermaid-js.github.io/mermaid/#/

Demo:

1
2
3
4
5
6
7

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

Mindmap

Demo:

1
2
3
4
5
6
7
8
9
10
11
12

```mindmap
# Demo

## Features 

- A
- B

## Links
- C
- D
```

For more details see https://markmap.js.org/repl