Diagram examples

March 13, 2022

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)

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
1 5 0 4 2 6 3 7 + z + y + x v 1 v P 0 X v 3 E y v e 2 R e f r a c t i o n R e f l e c t i o n
& A M S i o i q f b B x u j o e a ( - x d r a > e f R > c o C n u o b ( n r ) ) d n e e J d r o s i n N o R D t o i u a a n g d d l o i t n e D i a g o n a l s C V u e r r v t e i d c a l n o t A N C : o u l d r r i A a / I v n s i n e e h s t d - e - t r l B i h i i s i o n ' s r e q n . u * o o b t t o e l a s d ' * l i n e D o n S e e ? a r c 3 h

Sequence Diagram

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

A A l l f b i i o a c H < c o r e H e e e l l l l o 2 2 o A B l o i 3 6 b c ! e B > ! B o o 4 7 b b 5 8
home | top | RSS