Zenn
☕

Mermaid で、ER図書く勉強メモ

2023/03/17に公開
Mermaid
tech

概要:

Mermaid記法メモとなります

  • ER図等の調査していたら。Mermaid調べる事になりましたの記載しておきます。

関連

https://mermaid.js.org/intro/

テスト環境

Mermaid記法

  • table
erDiagram
  users {
    string name
    string email
    integer age
  }
  • related
erDiagram
  e01 ||--|{ e02: "1 - 1 over"
  e01 ||--o{ e03: "1 - many"
  e01 ||--o| e04: "1 - 0 over"
  • ER chart: table + related的な表記
---
title: Order example2
---
erDiagram
  e01 ||--|{ e02: "1 - 1 over"
  e01 ||--o{ e03: "1 - many"
  e01 ||--o| e04: "1 - 0 over"
  e02 {
    string name
    string email
    integer age
  }
  e03 {
    string name
    string email
    integer age
  }  
  e04 {
    string name
    string email
    integer age
  }   
  e02||--|{ e05: ""
  e05 {
    string name
    string email
    integer age
  }
  • mermaid.liveでみると、下記の図

HTMLで表示

<html>
  <body>
    And here is another:
    <pre class="mermaid">
      ---
      title: Order example2
      ---
      erDiagram
      e01 ||--|{ e02: "1 - 1 over"
      e01 ||--o{ e03: "1 - many"
      e01 ||--o| e04: "1 - 0 over"
      e02 {
        string name
        string email
        integer age
      }
      e03 {
        string name
        string email
        integer age
      }  
      e04 {
        string name
        string email
        integer age
      }   
      e02||--|{ e05: ""
      e05 {
        string name
        string email
        integer age
      }        
    </pre>

    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
  </body>
</html>
  • HTML見た目

....

Discussion