With Plugins
Our tool setup is based on Material for MkDocs. We recommend that you review their documentation as well.
Note
This setup is based on their public version, not the "insiders" one.
Mermaid
See this Material for MkDocs section, but below are some quick examples:
Need a newer version?
If the mermaid version installed on the docs machine is not working for your needs,
try setting the version explicitly in your mkdocs.yml, e.g.:
plugins:
- mermaid2:
version: 9.1.4
Ref: https://github.com/fralau/mkdocs-mermaid2-plugin#specifying-the-version-of-the-mermaid-library.
Switching dark/light-mode and diagrams not updating properly?
In a few sites (including this one), we have successfully implemented the mechanism described in this section in mkdocs-mermaid2-plugin page to address this issue. Let us know if you need assistance.
Flowcharts, Graphs
```mermaid
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
```
generates:
```mermaid
flowchart LR
DashUI --- TD([TethysDash]) ---- LRAUVs
```
generates:
Class Diagrams
```mermaid
classDiagram
Animal <|-- Duck
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()
}
```
generates:
Sequence Diagrams
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
generates: