Joplinでフローチャート、ガントチャート、円グラフ等の図を描く

投稿者: | 2020-03-28
Table of Content

mermaid記法という方法で、フローチャート、ガントチャート、円グラフ等の図を描くことができる。
mermaid

フローチャート

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Joplin Flowcharts

シーケンス図

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

Joplin - Sequence 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()
      }
```

Joplin - Class diagrams

状態遷移図

```mermaid
stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

Joplin - State diagrams

ガントチャート

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```

Joplin - Gantt diagrams

円グラフ

```mermaid
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
```

Joplin - Pie chart diagrams

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA