Mermaid language preview

nodes, arrows, and a subgraph

horizon-dark

%% request flow
flowchart LR
  A[Client] --> B{API}
  subgraph cluster
    B --> C[(Database)]
  end

atom-one-dark

%% request flow
flowchart LR
  A[Client] --> B{API}
  subgraph cluster
    B --> C[(Database)]
  end

github-dark

%% request flow
flowchart LR
  A[Client] --> B{API}
  subgraph cluster
    B --> C[(Database)]
  end

dracula

%% request flow
flowchart LR
  A[Client] --> B{API}
  subgraph cluster
    B --> C[(Database)]
  end

nord

%% request flow
flowchart LR
  A[Client] --> B{API}
  subgraph cluster
    B --> C[(Database)]
  end

github

%% request flow
flowchart LR
  A[Client] --> B{API}
  subgraph cluster
    B --> C[(Database)]
  end

participants and messages

horizon-dark

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: Hello
  Bob-->>Alice: Hi

atom-one-dark

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: Hello
  Bob-->>Alice: Hi

github-dark

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: Hello
  Bob-->>Alice: Hi

dracula

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: Hello
  Bob-->>Alice: Hi

nord

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: Hello
  Bob-->>Alice: Hi

github

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: Hello
  Bob-->>Alice: Hi

types and relationships

horizon-dark

classDiagram
  class User {
    +String name
    +login()
  }
  User --> Account

atom-one-dark

classDiagram
  class User {
    +String name
    +login()
  }
  User --> Account

github-dark

classDiagram
  class User {
    +String name
    +login()
  }
  User --> Account

dracula

classDiagram
  class User {
    +String name
    +login()
  }
  User --> Account

nord

classDiagram
  class User {
    +String name
    +login()
  }
  User --> Account

github

classDiagram
  class User {
    +String name
    +login()
  }
  User --> Account