Diagrams using extended syntax
Overview
You can describe design information by incorporating diagrams using extended syntax such as PlantUML into Markdown content.
| Supported Notations | Types of Diagrams That Can Be Described |
|---|---|
| PlantUML | Class diagrams, sequence diagrams, use case diagrams, activity diagrams, state transition diagrams, etc. |
| Mermaid | Flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, etc. |
| Graphviz | Directed graphs, undirected graphs, network diagrams, tree diagrams, etc. |
| Chart.js | Bar graphs, line graphs, pie charts, radar charts, scatter plots, etc. |
-
To use diagram representations such as PlantUML and Mermaid, various open source software is required.
Please check the Installation Prerequisites and install the required software. -
The above diagram representations are based on the specifications of each open software.
Below are references, display examples, and description examples for each diagram representation.
PlantUML
References
External site: https://plantuml.com/
Display example
Description example
# Diagram representation using PlantUML
```plantuml
class Car
Driver - Car : drives >
Car *- Wheel : have 4 >
Car -- Person : < owns
```
Mermaid
References
External site: https://mermaid-js.github.io/mermaid/
Display example
Example
# Diagram representation using Mermaid
```mermaid
flowchart TD
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
```
Graphviz
References
External site: https://graphviz.org/
Display example
Description example
# Diagram representation using Graphviz
```graphviz
digraph {
subgraph cluster_0 {
label="layer1";
Swc1->Swc2[color=red];
Swc2->Swc3;
Swc2->Swc4;
}
subgraph cluster_1 {
label="layer2";
Swc1->Swc12;
Swc1->Swc13[color=red];
Swc1->Swc14;
}
}
```
Chart.js
References
External site: https://www.chartjs.org/
Display example
Example
# Chart representation using Chart.js
```chart
{
type: 'doughnut',
data: {
labels: ['Red', 'Green', 'Blue'],
datasets: [{
data: [10, 20, 30],
backgroundColor: ['#f88', '#484', '#48f'],
weight: 100,
}],
}
}
```