Mermaid

Setup

pnpm add @docusaurus/theme-mermaid

Links

• mermaid.js.org
• Try Editor
• []Get started](https://mermaid.js.org/intro/)
• Projects

---

• Diagrams

---

• Can I control the direction of flowcharts in Mermaid?
• How to style a Mermaid subgraph's title?

Examples

How to style a Mermaid subgraph's title?

%%{init: {'theme':'base', 'themeVariables': {'fontFamily':'Merienda', 'fontSize':'20px'}, 'flowchart': {'markdownAutoWrap': false, 'htmlLabels': true, 'subGraphTitleMargin': {'bottom':50, 'top':30}}}}%%
flowchart TD
    subgraph speech["<span style='display:block; width:100%; text-align:left; white-space: nowrap; font-size:23px; font-weight:600; color:#373a8a;'><i>An experiment in setting headings in mermaid diagrams</i></span>"]
        direction LR
        A["A long amount of text that shall not be wrapped <br>(but mermaid can't help it)"] ---- B["B"]
        B[" "] --> C["<span style='display:block; width:100%; white-space: nowrap;'>But, with html styling, maybe wrapping can be prevented</span>"]
    end
    
    subgraph textbox["`Hola!`"]
    end
    
    speech --> textbox
    
    classDef default fill:#e8f4f8,stroke:#4a90e2,stroke-width:2px;
    classDef padding padding-top:10px,padding-bottom:270px,fill:#f9f9f9;
    class speech padding
    class textbox default
    
    style speech stroke:#FF69B4,stroke-width:4px
    style textbox fill:#e8f8f5,stroke:#27ae60,stroke-width:3px
    style A fill:#fff4e6,stroke:#f39c12,stroke-width:4px

---

graph LR;
    A(["https://example.com/"])
    B(["/base-url/"])
    C(["/docs/"])
    D(["/blog/"])
    E(["/"])
    F["All docs <br/>routes"]
    G["All blog <br/>routes"]
    H["All pages <br/>routes"]
    A---B;
    B---C;
    B---D;
    B---E;
    C---F;
    D---G;
    E---H;

    subgraph "Título Do Grupo"
        a1[Nó A1] --> a2(Nó A2)
    end
    subgraph Outro Grupo
        b1>Nó B1] --> b2{Nó B2}
    end
    a2 --> b1

    %% Graph 3
    %% subgraph "Grupo Principal (Processo 1)"
        %% Define um subgrafo com o título "Grupo Principal (Processo 1)"
        %% direction TD  %% ignored in subgraphs!!!
        %% A3[Início do Processo 1] --> B3{Decisão no Processo 1}
        %% B3 --> C3(Passo Intermediário 1)
        %% C3 --> D3[Fim do Processo 1]
    %% end
    %% subgraph "Grupo Secundário (Processo 2)"
        %% Define outro subgrafo
        %% direction TD  %% ignored in subgraphs!!!
        %% E3[Início do Processo 2] --> F3(Passo Intermediário 2)
        %% F3 --> G3[Fim do Processo 2]
    %% end
    %% Conexões entre grupos
    %% D3 --> E3

Block Diagram

https://mermaid.js.org/syntaxv/block.html

block
  columns 1
  db(("DB"))
  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
  block:ID
    columns 3
    T1["&nbsp;"]
    T2["File System"]
    T3["&nbsp;"]
    A
    B["B - A wide one in the middle"]
    C
  end
  space
  block:Z
    D
    E
    F
  end
  ID --> Z
  Z --> ID
  C --> F
  style B fill:#969,stroke:#333,stroke-width:4px

class T1 BT
class T2 BT
class T3 BT
classDef BT stroke:transparent,fill:transparent

---

block-beta
    columns 1
    block:uc:1
      columns 3
      uct("UC Title"):3
      UseCase1 Usecase2 UseCase3
      space:3
      UseCase4 Usecase5 UseCase6
    end
    block:Z:1
      columns 3
      E
      F
      G
    end

class uct BT
classDef BT stroke:transparent,fill:transparent

---

block
  columns 1
  db(("DB"))
  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
  block:ID
    A
    B["B - A wide one in the middle"]
    C
  end
  space
  block:Z
    D
    E
    F
  end
  ID --> Z
  Z --> ID
  C --> F
  style B fill:#969,stroke:#333,stroke-width:4px

---

block-beta
   columns 5
   A space B space C
   space space space space space
   F space E space D

   A --> B
   B --> C
   C --> D
   D --> E
   E --> F

---

graph LR;
    A(["https://example.com/"])
    B(["/base-url/"])
    C(["/docs/"])
    D(["/blog/"])
    E(["/"])
    F["All docs <br/>routes"]
    G["All blog <br/>routes"]
    H["All pages <br/>routes"]
    A---B;
    B---C;
    B---D;
    B---E;
    C---F;
    D---G;
    E---H;

---

flowchart TD

subgraph Z[" "]
direction LR
  A --> B
  B --> C
end

subgraph ZA[" "]
direction RL
    D-->E
    E-->F
end

Z --> ZA

---

graph TD
    A --> B
    subgraph Subgráfico_Um [Módulo Um]
        direction LR
        B1 --> B2 --> B3
    end
    B --> C
    subgraph Subgráfico_Dois [Módulo Dois]
        direction LR
        D1 --> D2 --> D3
    end
    C --> F
    B3 --> F
    D3 --> F

graph TD
    %% Definição do primeiro subgrafo/grupo (Sistema A)
    subgraph SA [Sistema A - Backend]
        A[Serviço 1] --> B(Banco de Dados);
        A --> C(Cache);
    end

    %% Definição do segundo subgrafo/grupo (Sistema B)
    subgraph SB [Sistema B - Frontend]
        D(Interface do Usuário) --> E[API Gateway];
    end

    %% Interligação entre os grupos
    %% Conexão do nó E (no SB) para o nó A (no SA)
    E --> A;

    %% Conexão direta entre os subgrafos (opcional, dependendo da versão/renderizador)
    %% Esta linha pode não renderizar em todos os visualizadores, a conexão via nós internos é mais robusta.
    %% SA --- SB;

architecture-beta
    group idp(cloud)[IDP]

    service db(database)[Database] in idp
    service disk1(disk)[Storage] in idp
    service disk2(disk)[Storage] in idp
    service server(server)[Server] in idp
    service cloud(cloud)[Cloud] in idp
    service internet(internet)[Internet] in idp

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
    cloud:T <--> B:internet

    group fs(disk)[File System]
    service code(cloud)[code] in fs
    service docs(cloud)[docs] in fs
    code:L -- R:docs

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

graph TD
    A[docs] --> B(metadata)
    C[code] --> B
    B <--> D(ai-agent)