Mermaid

Freki mermaid diagrams and charts using the JS API.

---
title: Flowchart
---

flowchart TD
    A --> B & D --> C

Diagrams

Flowchart

Text

flowchart TD
    node -->
    txt[Custom text] & uni["❤  Unicode"] -->
    md["`**Markdown** _formatting_
        with
        **_lines_**
    `"]

Shapes

flowchart TD
    id1(round edges) -->
    id2([stadium shaped]) -->
    id3[[subroutine]]

    id5((circle)) -->
    id5a(((double circle))) -->
    id4[(cylindrical)] 


    id7{rhombus} -->
    id9[/parallelogram/] -->
    id10[\parallelogram alt\] -->
    id11[/trapazoid\] -->
    id12[\trapazoid alt/]

    id6>asymmetric] -->
    id8{{hexagon}}

Sequence Diagram

sequenceDiagram
  participant User
  participant System
  User->>System: Request action
  System-->>User: Confirm action
  User->>System: Proceed
  System-->>User: Complete

Gantt Chart

gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d

Class Diagram

---
title: Animal example
---

classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly, can swim, can dive, can help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

State Diagram

stateDiagram-v2
  [*] --> Idle
  Idle --> Running : start()
  Running --> Idle : stop()
  Running --> Error : error()
  Error --> [*] : reset()

Pie Chart

pie title Usage
  "A" : 45.0
  "B" : 26.8
  "C" : 16.8
  "D" : 8.5
  "E" : 2.9