Diagrams using extended syntax
Overview
You can describe design information by incorporating diagrams using extended syntax such as PlantUML into Markdown content.
| Extended Syntax | 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 extended syntax such as PlantUML and Mermaid, various open source software is required.
Please check the Installation Prerequisites and install the required software. -
The description of the diagrams using the above extended syntax conforms to the specifications of each open source 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,
}],
}
}
```