#20 ダイアグラムとチャート

PenPage は Mermaid に対応しています — テキストでダイアグラムを作成できるツールです。コードブロックに簡単なテキストを入力すると、自動的にダイアグラムに変換されます。

使い方： コードブロックを作成し、言語を `mermaid` に設定します。コードの下にダイアグラムが表示されます。

以下の 12 種類のダイアグラムが使用できます。任意の例をコピーしてご利用ください。

---

1. Flowchart

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

2. Sequence Diagram

sequenceDiagram
  participant U as User
  participant A as App
  participant S as Server
  U->>A: Click Save
  A->>S: POST /api/save
  S-->>A: 200 OK
  A-->>U: Show success

3. Gantt Chart

gantt
  title Project Plan
  dateFormat YYYY-MM-DD
  section Design
    Wireframe     :done, d1, 2025-01-01, 7d
    Prototype     :active, d2, after d1, 5d
  section Dev
    Frontend      :d3, after d2, 10d
    Backend       :d4, after d2, 12d
  section Launch
    Testing       :d5, after d4, 5d
    Deploy        :d6, after d5, 2d

4. Class Diagram

classDiagram
  class Animal {
    +String name
    +makeSound()
  }
  class Dog {
    +fetch()
  }
  class Cat {
    +purr()
  }
  Animal <|-- Dog
  Animal <|-- Cat

5. Entity Relationship

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : includes
    CUSTOMER {
        string id
        string name
        string email
    }
    ORDER {
        string id
        date orderDate
        string status
    }
    PRODUCT {
        string id
        string name
        float price
    }
    ORDER_ITEM {
        int quantity
        float price
    }

6. State Diagram

stateDiagram-v2
  [*] --> Draft
  Draft --> Review : Submit
  Review --> Approved : Accept
  Review --> Draft : Reject
  Approved --> Published : Deploy
  Published --> [*]

7. Pie Chart

pie title Time Spent This Week
  "Coding" : 40
  "Meetings" : 20
  "Review" : 15
  "Learning" : 15
  "Other" : 10

8. Git Graph

gitGraph
  commit id: "Init"
  branch feature
  checkout feature
  commit id: "Add UI"
  commit id: "Add API"
  checkout main
  commit id: "Hotfix"
  merge feature id: "Merge"
  commit id: "Release"

9. Mindmap（マインドマップ）

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      PenPage
      Mermaid

10. XY Chart

xychart-beta
  title "Project Status"
  x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
  y-axis "Progress (hr)" 10 --> 120
  bar [80, 80, 80, 90, 90, 90, 95, 100, 100, 110, 120, 120]
  line [12, 25 , 27, 35, 38, 56, 58 , 69]
  line [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]

11. Quadrant Chart

quadrantChart
  title Task Priority Matrix
  x-axis Low Effort --> High Effort
  y-axis Low Impact --> High Impact
  quadrant-1 Do First
  quadrant-2 Schedule
  quadrant-3 Delegate
  quadrant-4 Eliminate
  Fix login bug: [0.2, 0.9]
  Redesign homepage: [0.8, 0.8]
  Update docs: [0.3, 0.4]
  Refactor CSS: [0.7, 0.3]
  Add dark mode: [0.6, 0.7]

12. User Journey

journey
  title User Onboarding
  section Sign Up
    Visit site: 5: User
    Fill form: 3: User
    Verify email: 4: User
  section First Use
    Create note: 5: User
    Explore features: 4: User
    Share a page: 5: User

---

もっと詳しく

Mermaid はさらに多くのダイアグラムタイプとオプションをサポートしています。完全な構文リファレンスは公式ドキュメントをご覧ください：

Mermaid 公式ドキュメント — mermaid.js.org

ライブエディタ — mermaid.live — オンラインでダイアグラムを試してから PenPage に貼り付けできます。