# a post with diagrams

July 4, 2021

[** 2021](https://alextisyoung.com/blog/2021) · [** formatting](https://alextisyoung.com/blog/tag/formatting) [** diagrams](https://alextisyoung.com/blog/tag/diagrams)

This theme supports generating various diagrams from a text description using [jekyll-diagrams](https://github.com/zhustec/jekyll-diagrams) plugin. Below, we generate a few examples of such diagrams using languages such as [mermaid](https://mermaid-js.github.io/mermaid/), [plantuml](https://plantuml.com/), [vega-lite](https://vega.github.io/vega-lite/), etc.

**Note:** different diagram-generation packages require external dependencies to be installed on your machine. Also, be mindful of that because of diagram generation the fist time you build your Jekyll website after adding new diagrams will be SLOW. For any other details, please refer to [jekyll-diagrams](https://github.com/zhustec/jekyll-diagrams) README.

## Mermaid

Install mermaid using `node.js` package manager `npm` by running the following command:

```
npm install -g mermaid.cli
```

The diagram below was generated by the following code:

```
{% mermaid %}
sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
{% endmermaid %}
```

JohnAliceHello John, how are you?Great!JohnAlice

---

## Enjoy Reading This Article?

Here are some more articles you might like to read next:

- [a distill-style blog post](https://alextisyoung.com/blog/2021/distill/)

- [a post with code](https://alextisyoung.com/blog/2015/code/)

- [displaying beautiful tables with Bootstrap Tables](https://alextisyoung.com/blog/2023/tables/)

- [a post with jupyter notebook](https://alextisyoung.com/blog/2023/jupyter-notebook/)

- [a post with math](https://alextisyoung.com/blog/2015/math/)

Source: [a post with diagrams | Alexander Strudwick Young](https://alextisyoung.com/blog/2021/diagrams/)