Diagrams Material
Diagrams Material
Section titled “Diagrams Material”Syntax
Section titled “Syntax”| Form | Syntax | Usage |
|---|---|---|
| Mermaid | fence mermaid | Flowchart, sequence, state, ER, quadrant. |
| PlantUML | fence plantuml | UML via Kroki. |
| Graphviz | fence dot / graphviz | Graphes DOT. |
| D2 | fence d2 | Diagrammes D2. |
| Svgbob | fence svgbob | ASCII vers SVG. |
| Vega | fence vega | Specification Vega. |
Reference documentation
Section titled “Reference documentation”| Engine | Reference |
|---|---|
| Mermaid | Mermaid diagram syntax |
| Kroki | Kroki supported diagram types |
| PlantUML | PlantUML language reference |
| Graphviz | DOT language reference |
| D2 | D2 language tour |
| Svgbob | Svgbob project reference |
Mermaid flowchart
Section titled “Mermaid flowchart”~~~ mermaid
graph LR
A[Start] --> B{Error?}
B -->|Yes| C[Debug]
C --> D[Retry]
D --> B
B -->|No| E[Yay!]
~~~graph LR;
A[Start] --> B{Error?}
B -->|Yes| C[Debug]
C --> D[Retry]
D --> B
B -->|No| E[Yay!]Mermaid sequence
Section titled “Mermaid sequence”~~~ mermaid
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
John-->>Alice: Great!
~~~sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
John-->>Alice: Great!Mermaid state
Section titled “Mermaid state”~~~ mermaid
stateDiagram-v2
[*] --> Draft
Draft --> Review
Review --> Published
Review --> Draft
Published --> [*]
~~~stateDiagram-v2
[*] --> Draft
Draft --> Review
Review --> Published
Review --> Draft
Published --> [*]Mermaid entity relationship
Section titled “Mermaid entity relationship”~~~ mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
LINE_ITEM {
string name
int quantity
}
~~~erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
LINE_ITEM {
string name
int quantity
}Mermaid 4 quadrants
Section titled “Mermaid 4 quadrants”~~~ mermaid
quadrantChart
title Priorisation des initiatives
x-axis Faible impact --> Fort impact
y-axis Faible effort --> Fort effort
quadrant-1 Gros chantiers
quadrant-2 Actions rapides
quadrant-3 A eviter
quadrant-4 Opportunites ciblees
Automatiser les tests: [0.82, 0.72]
Nettoyer le backlog: [0.35, 0.28]
Add a search engine: [0.74, 0.42]
Refaire toute la navigation: [0.46, 0.86]
Documenter les workflows: [0.68, 0.33]
~~~quadrantChart
title Priorisation des initiatives
x-axis Faible impact --> Fort impact
y-axis Faible effort --> Fort effort
quadrant-1 Gros chantiers
quadrant-2 Actions rapides
quadrant-3 A eviter
quadrant-4 Opportunites ciblees
Automatiser les tests: [0.82, 0.72]
Nettoyer le backlog: [0.35, 0.28]
Add a search engine: [0.74, 0.42]
Refaire toute la navigation: [0.46, 0.86]
Documenter les workflows: [0.68, 0.33]Kroki PlantUML
Section titled “Kroki PlantUML”~~~ plantuml
@startuml
actor User
participant Website
participant API
User -> Website: Open docs
Website -> API: Fetch metadata
API --> Website: Metadata
Website --> User: Render page
@enduml
~~~@startuml
actor User
participant Website
participant API
User -> Website: Open docs
Website -> API: Fetch metadata
API --> Website: Metadata
Website --> User: Render page
@endumlKroki Graphviz
Section titled “Kroki Graphviz”~~~ graphviz
digraph G {
rankdir=LR
Start -> Build -> Verify -> Publish
Verify -> Build [label="fix"]
}
~~~digraph G {
rankdir=LR
Start -> Build -> Verify -> Publish
Verify -> Build [label="fix"]
}Kroki D2
Section titled “Kroki D2”~~~ d2
direction: right
user: User
site: Website
api: API
user -> site: reads docs
site -> api: requests data
api -> site: returns JSON
~~~direction: right
user: User
site: Website
api: API
user -> site: reads docs
site -> api: requests data
api -> site: returns JSONKroki Svgbob
Section titled “Kroki Svgbob”~~~ svgbob
+--------+ +--------+
| Client | ---> | Server |
+--------+ +--------+
~~~+--------+ +--------+
| Client | ---> | Server |
+--------+ +--------+