Add some clarification on how to enable mermaid. --------- Signed-off-by: George Araújo <george.gcac@gmail.com> Co-authored-by: George Araújo <george.gcac@gmail.com>
45 lines
1.2 KiB
Markdown
45 lines
1.2 KiB
Markdown
---
|
|
layout: post
|
|
title: a post with diagrams
|
|
date: 2021-07-04 17:39:00
|
|
tags: formatting diagrams
|
|
description: an example of a blog post with diagrams
|
|
mermaid:
|
|
enabled: true
|
|
zoomable: true
|
|
---
|
|
|
|
This theme supports generating various diagrams from a text description using [mermaid](https://mermaid-js.github.io/mermaid/){:target="\_blank"}. Previously, this was done using the [jekyll-diagrams](https://github.com/zhustec/jekyll-diagrams){:target="\_blank"} plugin. For more information on this matter, see the [related issue](https://github.com/alshedivat/al-folio/issues/1609#issuecomment-1656995674).
|
|
|
|
To enable mermaid, you have to put the following in this post frontmatter:
|
|
|
|
```yml
|
|
mermaid:
|
|
enabled: true
|
|
zoomable: true
|
|
```
|
|
|
|
To disable the zooming feature, set `mermaid: zoomable` to `false`.
|
|
|
|
## Mermaid
|
|
|
|
The diagram below was generated by the following code:
|
|
|
|
````markdown
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant John
|
|
participant Alice
|
|
Alice->>John: Hello John, how are you?
|
|
John-->>Alice: Great!
|
|
```
|
|
````
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant John
|
|
participant Alice
|
|
Alice->>John: Hello John, how are you?
|
|
John-->>Alice: Great!
|
|
```
|