hugo

Fork of github.com/gohugoio/hugo with reverse pagination support

git clone git://git.shimmy1996.com/hugo.git

diagrams.md (14093B)

    1 ---
    2 title: Diagrams
    3 date: 2022-02-20
    4 categories: [content management]
    5 keywords: [diagrams,drawing]
    6 menu:
    7   docs:
    8     parent: "content-management"
    9     weight: 22
   10 weight: 22
   11 toc: true
   12 ---
   13 
   14 
   15 {{< new-in "0.93.0" >}}
   16 
   17 
   18 ## GoAT Diagrams (Ascii)
   19 
   20 Hugo! supports [GoAT](https://github.com/bep/goat) natively. This means that this code block:
   21 
   22 ````
   23 ```goat
   24       .               .                .               .--- 1          .-- 1     / 1
   25      / \              |                |           .---+            .-+         +
   26     /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
   27    +     +        |       |        |       |    ---+            ---+          +
   28   / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
   29  /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
   30  1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4
   31 
   32 ```
   33 ````
   34 
   35 Will be rendered as:
   36 
   37 ```goat
   38 
   39           .               .                .               .--- 1          .-- 1     / 1
   40          / \              |                |           .---+            .-+         +
   41         /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
   42        +     +        |       |        |       |    ---+            ---+          +
   43       / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
   44      /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
   45      1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4
   46 ```
   47 
   48 
   49 
   50 
   51 
   52 ## Mermaid Diagrams
   53 
   54 Hugo currently does not provide default templates for Mermaid diagrams. But you can easily add your own. One way to do it would be to create ` layouts/_default/_markup/render-codeblock-mermaid.html`:
   55 
   56 
   57 ```go-html-template
   58 <div class="mermaid">
   59   {{- .Inner | safeHTML }}
   60 </div>
   61 {{ .Page.Store.Set "hasMermaid" true }}
   62 ```
   63 
   64 And then include this snippet at the bottom of the content template (below `.Content`):
   65 
   66 ```go-html-template
   67 {{ if .Page.Store.Get "hasMermaid" }}
   68   <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
   69   <script>
   70     mermaid.initialize({ startOnLoad: true });
   71   </script>
   72 {{ end }}
   73 ```
   74 
   75 With that you can use the `mermaid` language in Markdown code blocks:
   76 
   77 ```mermaid
   78 sequenceDiagram
   79     participant Alice
   80     participant Bob
   81     Alice->>John: Hello John, how are you?
   82     loop Healthcheck
   83         John->>John: Fight against hypochondria
   84     end
   85     Note right of John: Rational thoughts <br/>prevail!
   86     John-->>Alice: Great!
   87     John->>Bob: How about you?
   88     Bob-->>John: Jolly good!
   89 ```
   90 
   91 
   92 
   93 ## Goat Ascii Diagram Examples
   94 
   95 ### Graphics
   96 
   97 ```goat
   98                                                                              .
   99     0       3                          P *              Eye /         ^     /
  100      *-------*      +y                    \                +)          \   /  Reflection
  101   1 /|    2 /|       ^                     \                \           \ v
  102    *-------* |       |                v0    \       v3           --------*--------
  103    | |4    | |7      |                  *----\-----*
  104    | *-----|-*       +-----> +x        /      v X   \          .-.<--------        o
  105    |/      |/       /                 /        o     \        | / | Refraction    / \
  106    *-------*       v                 /                \        +-'               /   \
  107   5       6      +z              v1 *------------------* v2    |                o-----o
  108                                                                v
  109 
  110 ```
  111 
  112 ### Complex
  113 
  114 ```goat
  115 +-------------------+                           ^                      .---.
  116 |    A Box          |__.--.__    __.-->         |      .-.             |   |
  117 |                   |        '--'               v     | * |<---        |   |
  118 +-------------------+                                  '-'             |   |
  119                        Round                                       *---(-. |
  120   .-----------------.  .-------.    .----------.         .-------.     | | |
  121  |   Mixed Rounded  | |         |  / Diagonals  \        |   |   |     | | |
  122  | & Square Corners |  '--. .--'  /              \       |---+---|     '-)-'       .--------.
  123  '--+------------+-'  .--. |     '-------+--------'      |   |   |       |        / Search /
  124     |            |   |    | '---.        |               '-------'       |       '-+------'
  125     |<---------->|   |    |      |       v                Interior                 |     ^
  126     '           <---'      '----'   .-----------.              ---.     .---       v     |
  127  .------------------.  Diag line    | .-------. +---.              \   /           .     |
  128  |   if (a > b)     +---.      .--->| |       | |    | Curved line  \ /           / \    |
  129  |   obj->fcn()     |    \    /     | '-------' |<--'                +           /   \   |
  130  '------------------'     '--'      '--+--------'      .--. .--.     |  .-.     +Done?+-'
  131     .---+-----.                        |   ^           |\ | | /|  .--+ |   |     \   /
  132     |   |     | Join        \|/        |   | Curved    | \| |/ | |    \    |      \ /
  133     |   |     +---->  o    --o--        '-'  Vertical  '--' '--'  '--  '--'        +  .---.
  134  <--+---+-----'       |     /|\                                                    |  | 3 |
  135                       v                             not:line    'quotes'        .-'   '---'
  136   .-.             .---+--------.            /            A || B   *bold*       |        ^
  137  |   |           |   Not a dot  |      <---+---<--    A dash--is not a line    v        |
  138   '-'             '---------+--'          /           Nor/is this.            ---
  139 
  140 ```
  141 
  142 ### Process
  143 
  144 ```goat
  145                                       .
  146    .---------.                       / \
  147   |   START   |                     /   \        .-+-------+-.      ___________
  148    '----+----'    .-------.    A   /     \   B   | |COMPLEX| |     /           \      .-.
  149         |        |   END   |<-----+CHOICE +----->| |       | +--->+ PREPARATION +--->| X |
  150         v         '-------'        \     /       | |PROCESS| |     \___________/      '-'
  151     .---------.                     \   /        '-+---+---+-'
  152    /  INPUT  /                       \ /
  153   '-----+---'                         '
  154         |                             ^
  155         v                             |
  156   .-----------.                 .-----+-----.        .-.
  157   |  PROCESS  +---------------->|  PROCESS  |<------+ X |
  158   '-----------'                 '-----------'        '-'
  159 ```
  160 
  161 ### File tree
  162 
  163 Created from https://arthursonzogni.com/Diagon/#Tree
  164 
  165 ```goat  { width=300  color="orange" }
  166 ───Linux─┬─Android
  167          ├─Debian─┬─Ubuntu─┬─Lubuntu
  168          │        │        ├─Kubuntu
  169          │        │        ├─Xubuntu
  170          │        │        └─Xubuntu
  171          │        └─Mint
  172          ├─Centos
  173          └─Fedora
  174 ```
  175 
  176 
  177 ### Sequence Diagram
  178 
  179 https://arthursonzogni.com/Diagon/#Sequence
  180 
  181 ```goat { class="w-40" }
  182 ┌─────┐       ┌───┐
  183 │Alice│       │Bob│
  184 └──┬──┘       └─┬─┘
  185    │            │  
  186    │ Hello Bob! │  
  187    │───────────>│  
  188    │            │  
  189    │Hello Alice!│  
  190    │<───────────│  
  191 ┌──┴──┐       ┌─┴─┐
  192 │Alice│       │Bob│
  193 └─────┘       └───┘
  194 
  195 ```
  196 
  197 
  198 ### Flowchart
  199 
  200 https://arthursonzogni.com/Diagon/#Flowchart
  201 
  202 ```goat
  203    _________________                                                              
  204   ╱                 ╲                                                     ┌─────┐ 
  205  ╱ DO YOU UNDERSTAND ╲____________________________________________________│GOOD!│ 
  206  ╲ FLOW CHARTS?      ╱yes                                                 └──┬──┘ 
  207   ╲_________________╱                                                        │    
  208            │no                                                               │    
  209   _________▽_________                    ______________________              │    
  210  ╱                   ╲                  ╱                      ╲    ┌────┐   │    
  211 ╱ OKAY, YOU SEE THE   ╲________________╱ ... AND YOU CAN SEE    ╲___│GOOD│   │    
  212 ╲ LINE LABELED 'YES'? ╱yes             ╲ THE ONES LABELED 'NO'? ╱yes└──┬─┘   │    
  213  ╲___________________╱                  ╲______________________╱       │     │    
  214            │no                                     │no                 │     │    
  215    ________▽_________                     _________▽__________         │     │    
  216   ╱                  ╲    ┌───────────┐  ╱                    ╲        │     │    
  217  ╱ BUT YOU SEE THE    ╲___│WAIT, WHAT?│ ╱ BUT YOU JUST         ╲___    │     │    
  218  ╲ ONES LABELED 'NO'? ╱yes└───────────┘ ╲ FOLLOWED THEM TWICE? ╱yes│   │     │    
  219   ╲__________________╱                   ╲____________________╱    │   │     │    
  220            │no                                     │no             │   │     │    
  221        ┌───▽───┐                                   │               │   │     │    
  222        │LISTEN.│                                   └───────┬───────┘   │     │    
  223        └───┬───┘                                    ┌──────▽─────┐     │     │    
  224      ┌─────▽────┐                                   │(THAT WASN'T│     │     │    
  225      │I HATE YOU│                                   │A QUESTION) │     │     │    
  226      └──────────┘                                   └──────┬─────┘     │     │    
  227                                                       ┌────▽───┐       │     │    
  228                                                       │SCREW IT│       │     │    
  229                                                       └────┬───┘       │     │    
  230                                                            └─────┬─────┘     │    
  231                                                                  │           │    
  232                                                                  └─────┬─────┘    
  233                                                                ┌───────▽──────┐   
  234                                                                │LET'S GO DRING│   
  235                                                                └───────┬──────┘   
  236                                                              ┌─────────▽─────────┐
  237                                                              │HEY, I SHOULD TRY  │
  238                                                              │INSTALLING FREEBSD!│
  239                                                              └───────────────────┘
  240 
  241 ```
  242 
  243 
  244 ### Table
  245 
  246 https://arthursonzogni.com/Diagon/#Table
  247 
  248 ```goat { class="w-80 dark-blue" }
  249 ┌────────────────────────────────────────────────┐
  250 │                                                │
  251 ├────────────────────────────────────────────────┤
  252 │SYNTAX     = { PRODUCTION } .                   │
  253 ├────────────────────────────────────────────────┤
  254 │PRODUCTION = IDENTIFIER "=" EXPRESSION "." .    │
  255 ├────────────────────────────────────────────────┤
  256 │EXPRESSION = TERM { "|" TERM } .                │
  257 ├────────────────────────────────────────────────┤
  258 │TERM       = FACTOR { FACTOR } .                │
  259 ├────────────────────────────────────────────────┤
  260 │FACTOR     = IDENTIFIER                         │
  261 ├────────────────────────────────────────────────┤
  262 │          | LITERAL                             │
  263 ├────────────────────────────────────────────────┤
  264 │          | "[" EXPRESSION "]"                  │
  265 ├────────────────────────────────────────────────┤
  266 │          | "(" EXPRESSION ")"                  │
  267 ├────────────────────────────────────────────────┤
  268 │          | "{" EXPRESSION "}" .                │
  269 ├────────────────────────────────────────────────┤
  270 │IDENTIFIER = letter { letter } .                │
  271 ├────────────────────────────────────────────────┤
  272 │LITERAL    = """" character { character } """" .│
  273 └────────────────────────────────────────────────┘
  274 ```
  275 
  276 
  277