Diagrams Material
Diagrams Material
Section intitulée « Diagrams Material »| 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 intitulée « 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 intitulée « Mermaid flowchart »~~~ mermaid
graph LR
A[Start] --> B{Error?}
B -->|Yes| C[Debug]
C --> D[Retry]
D --> B
B -->|No| E[Yay!]
~~~Mermaid sequence
Section intitulée « Mermaid sequence »~~~ mermaid
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
John-->>Alice: Great!
~~~Mermaid state
Section intitulée « Mermaid state »~~~ mermaid
stateDiagram-v2
[*] --> Draft
Draft --> Review
Review --> Published
Review --> Draft
Published --> [*]
~~~Mermaid entity relationship
Section intitulée « Mermaid entity relationship »~~~ mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
LINE_ITEM {
string name
int quantity
}
~~~Mermaid 4 quadrants
Section intitulée « 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]
~~~Kroki PlantUML
Section intitulée « 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
~~~Kroki Graphviz
Section intitulée « Kroki Graphviz »~~~ graphviz
digraph G {
rankdir=LR
Start -> Build -> Verify -> Publish
Verify -> Build [label="fix"]
}
~~~Kroki D2
Section intitulée « Kroki D2 »~~~ d2
direction: right
user: User
site: Website
api: API
user -> site: reads docs
site -> api: requests data
api -> site: returns JSON
~~~Kroki Svgbob
Section intitulée « Kroki Svgbob »~~~ svgbob
+--------+ +--------+
| Client | ---> | Server |
+--------+ +--------+
~~~