Diagram examples

Mermaid with custom CSS#

graph LR;
    A-->B[AAA];
    B-->D;

    %% Class Definitions
    %% =================
    class A cssClass;
    classDef cssClass fill:#f9f,stroke:#333,stroke-width:4px, font-size:15px;

graph-easy rendering#

          ┌──────┐
          │  B   │
          └──────┘
            :
            :
            ∨
┌───┐     ┌──────┐     ┌───┐  label between arrow, yo!   ┌───┐
│ A │ ··> │ cool │ ──> │ E │ ∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼> │ F │
└───┘     └──────┘     └───┘                             └───┘
            ∧
            :
            :
          ┌──────┐
          │  C   │
          └──────┘

┌─────────────────┐               ┌───┐
│ Long Node Label │  A            │   │
│ left            │        long   │ B │
│           right │  edge label   │   │
│     center      │ ────────────> │   │
└─────────────────┘               └───┘

Code block highlight test#

                        code block with languate set

code block without language

Simple code

goat (hugo built-in)#

Sequence Diagram#

https://arthursonzogni.com/Diagon/#Sequence