ENG
  • KOR
  • ENG
  • JPN

mermaid

mermaidは、フローチャート、シーケンス図、クラス図、ガントチャートなどを生成するためのMarkdown風の構文を使用するライブラリです。

Latest Ver 11.5.0
Homepage
Github
1
78,711
想像を超えるグラフィック
デザインの限界を超えて、強力なダイアグラムでデータを視覚化しましょう。
mermaidは複雑なダイアグラムを簡単に作成できるライブラリです。

CDNダウンロード

License: MIT
すべてのバージョンを見る
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/mermaid.js
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/mermaid.min.js
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/Diagram.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/__mocks__/mermaidAPI.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/accessibility.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/accessibility.spec.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/assignWithDepth.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/chunks/mermaid.core/architectureDiagram-PQUH6ZAG.mjs
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/chunks/mermaid.core/architectureDiagram-PQUH6ZAG.mjs.map
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/chunks/mermaid.core/blockDiagram-5JUZGEFE.mjs

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。 
📄 HTML
<div class="mermaid">
  graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

🧩 External JS
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.13.5/dist/mermaid.min.js"></script>

⚙️ JavaScript
mermaid.initialize({startOnLoad:true});

Related Libraries

Library Icon
d3

D3はデータ駆動型ドキュメントを操作するための強力な視覚化機能を提供します。

⚡ Top Tools for Developers
Text Compare

テキスト比較

2つのテキストの違いを一目で確認できます。

Favicon Generator

Faviconジェネレーター

簡単かつ迅速にファビコンを生成します。

Lorem Ipsum Generator

Lorem Ipsumジェネレーター

デザイン用のダミーテキストを生成します。

Character Counter

文字数カウント

文字数と単語数をリアルタイムで確認できます。

SRT ↔ SMI

SRT ↔ SMI変換ツール

字幕形式を簡単に変換できます。

Text Extract(OCR)

画像テキスト抽出

画像内のテキストを自動で抽出します。