拡張記法による図表現

概要

マークダウンのコンテンツ中に PlantUML などの拡張記法による図表現を織り交ぜて設計情報を記述できます。

拡張記法	記述できる図表現の種類
PlantUML	クラス図、シーケンス図、ユースケース図、アクティビティ図、状態遷移図など
Mermaid	フローチャート、シーケンス図、ガントチャート、クラス図、状態図など
Graphviz	有向グラフ、無向グラフ、ネットワーク図、ツリー図など
Chart.js	棒グラフ、折れ線グラフ、円グラフ、レーダーチャート、散布図など

備考

• PlantUML や Mermaid などの拡張記法を利用するためには、各種オープンソースソフトウェアが必要です。
  インストールの前提条件 を確認して必要なソフトウェアをインストールしてください。

• 上記拡張記法による図表現の記述は各オープンソースソフトウェアの仕様に準じます。

以下では、各図表現についての参照先と表示例、記述例を示します。

PlantUML

参照先

外部サイト: https://plantuml.com/

表示例

記述例

# PlantUML による図表現

```plantuml
class Car
Driver - Car : drives >
Car *- Wheel : have 4 >
Car -- Person : < owns
```

Mermaid

参照先

外部サイト: https://mermaid-js.github.io/mermaid/

表示例

記述例

# Mermaid による図表現

```mermaid
flowchart TD
  A[Start] --> B{Is it?};
  B -- Yes --> C[OK];
  C --> D[Rethink];
  D --> B;
  B -- No ----> E[End];
```

Graphviz

参照先

外部サイト: https://graphviz.org/

表示例

記述例

# 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

参照先

外部サイト: https://www.chartjs.org/

表示例

記述例

# Chart.js による図表現

```chart
{
  type: 'doughnut',
  data: {
    labels: ['Red', 'Green', 'Blue'],
    datasets: [{
      data: [10, 20, 30],
      backgroundColor: ['#f88', '#484', '#48f'],
      weight: 100,
    }],
  }
}
```