Repolode
投稿する
mermaid-js

mermaid-js/mermaid

Mermaidは、Markdown風のテキスト定義からフローチャート、シーケンス図、ガントチャートなどを生成します。

代替できる製品:Lucidchartdraw.io

GitHub で見る公式サイト
スター
90,776
フォーク
9,374
未解決の Issue
1,938
最終コミット
10 時間前

これは何？

Mermaidは、テキスト定義をレンダリング済みの図に変換するJavaScriptおよびTypeScript向けの作図ツールです。フローチャートやシーケンス図などを短いテキストで記述すると、Mermaidがブラウザー上またはビルド時にSVGとして描画します。図はプレーンテキストなので、コードと一緒に保存したり、プルリクエストで編集したり、元のシステムが変わるたびに再生成したりできます。

フローチャート、シーケンス図、クラス図、状態遷移図、ER図、ガントチャート、円グラフ、Gitグラフ、マインドマップ、タイムライン、ユーザージャーニー、C4図など、幅広い種類の図に対応しています。npmパッケージ、CDNスクリプト、オンラインのLive Editorから利用でき、GitHubではMarkdownファイル内のMermaidコードブロックを直接レンダリングします。

信頼できない入力に対するデフォルトのサニタイズ処理を備えています。また、外部ユーザーが入力した図のコードを受け入れるサイト向けに、サンドボックス化されたiframeでのレンダリングモードも用意されています。ただし、このモードでは一部のインタラクティブ機能が制限されます。

主な機能

  • 01テキストからフローチャート、シーケンス図、クラス図、状態遷移図、ER図、ガントチャートなど、さまざまな種類の図をレンダリングします。
  • 02図はプレーンテキストなので、バージョン管理で差分を確認しやすく、レビューもスムーズです。
  • 03GitHubのMarkdown、npmパッケージ、CDNスクリプトから利用できます。
  • 04テーマ、色、フォント、レイアウトの方向をカスタマイズできます。
  • 05信頼できない図の入力に対応する、サンドボックス化されたレンダリングモードを利用できます。

ユースケース

  • アーキテクチャ図やシーケンス図を、説明対象のコードと一緒にリポジトリで管理する。
  • GitHubのREADMEファイルやドキュメントサイトに図を埋め込む。
  • ビルドパイプライン内でガントチャートや円グラフなどを生成する。
  • オンラインのLive Editorを使って、プログラマー以外の人が図を作成できるようにする。

クイックスタート

  1. 1

    mermaid.live の Mermaid Live Editor ですぐに図を試せます

トピック

#diagrams#diagrams-as-code#flowchart#uml-diagrams#documentation#markdown#javascript#typescript#mindmap

よくある質問

mermaid とは？
Mermaidは、Markdown風のテキスト定義からフローチャート、シーケンス図、ガントチャートなどを生成します。 Mermaidは、テキスト定義をレンダリング済みの図に変換するJavaScriptおよびTypeScript向けの作図ツールです。フローチャートやシーケンス図などを短いテキストで記述すると、Mermaidがブラウザー上またはビルド時にSVGとして描画します。図はプレーンテキストなので、コードと一緒に保存したり、プルリクエストで編集したり、元のシステムが変わるたびに再生成したりできます。
mermaid は無料で使えますか？ライセンスは？
mermaid は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
mermaid は今もメンテナンスされていますか？
活発にメンテナンス中。mermaid の最終コミットは 2026年10月20日 です。
mermaid は何に使えますか？
アーキテクチャ図やシーケンス図を、説明対象のコードと一緒にリポジトリで管理する。 GitHubのREADMEファイルやドキュメントサイトに図を埋め込む。 ビルドパイプライン内でガントチャートや円グラフなどを生成する。 オンラインのLive Editorを使って、プログラマー以外の人が図を作成できるようにする。
mermaid のインストール方法は？
mermaid.live の Mermaid Live Editor ですぐに図を試せます
mermaid はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/mermaid-js/mermaid

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト