Mermaidについて

Mermaidを使用すると、テキストとコードを使用して図や視覚化を作成できます。

これは、Markdownにインスパイアされたテキスト定義をレンダリングして、図を動的に作成および変更するJavaScriptベースの作図およびグラフ作成ツールです。

Markdownに精通していれば、Mermaidの構文の学習に問題はないはずです。

Mermaidは、Markdownにインスパイアされたテキスト定義とレンダラーを使用して、複雑な図を作成および変更するJavaScriptベースの作図およびグラフ作成ツールです。Mermaidの主な目的は、ドキュメントが開発に追いつくのを支援することです。

ドキュメントの陳腐化は、Mermaidが解決を支援する「キャッチ22」です。

図とドキュメント作成には貴重な開発者の時間がかかり、すぐに古くなります。しかし、図やドキュメントがないと、生産性が低下し、組織の学習が妨げられます。
Mermaidは、ユーザーが簡単に変更可能な図を作成できるようにすることで、この問題に対処します。また、プロダクションスクリプト（およびその他のコード）の一部にすることもできます。

Mermaidを使用すると、プログラマーでなくても、Mermaid Live Editorを通じて、詳細な図を簡単に作成できます。
チュートリアルにはビデオチュートリアルがあります。

お気に入りのアプリケーションでMermaidを使用するには、コミュニティ統合のリストを確認してください。

Mermaidの詳細な紹介とその基本的な使用法については、初心者向けガイドと使用方法を参照してください。

🌐 CDN | 📖 ドキュメント | 🙌 貢献 | 🔌 プラグイン

🖖 安定した活動を維持しましょう: Mermaidにはより多くの協力者が必要です。詳細はこちら。

🏆 Mermaidは、カテゴリー「最もエキサイティングなテクノロジーの使用」でJS Open Source Awards (2019)にノミネートされ、受賞しました!!!

関係者全員、プルリクエストをコミットした人々、質問に答えた人々、そしてプロジェクトのメンテナンスを手伝ってくれているタイラー・ロングに心から感謝します🙏

当社のPR視覚回帰テストは、寛大なオープンソースプランを備えたArgosによって強化されています。これにより、視覚的な変更を含むPRのレビュープロセスが非常に簡単になります。

リリースプロセスでは、applitoolsを使用した視覚回帰テストに大きく依存しています。Applitoolsは、使いやすくテストに統合しやすい優れたサービスです。

図の種類

フローチャート

シーケンス図

ガント図

クラス図

Gitグラフ

エンティティ関係図 - ❗ 試験的

ユーザージャーニー図

象限図

XYチャート

インストール

詳細なガイドと例は、はじめにと使用方法にあります。

Mermaidの構文について詳しく学ぶことも役立つでしょう。

CDN

https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/

バージョンを選択するには

<version>を目的のバージョン番号に置き換えてください。

最新バージョン: https://cdn.jsdelivr.net/npm/mermaid@11

Mermaidのデプロイ

Mermaidをデプロイするには

npmがあるnode v16をインストールする必要があります
Mermaidをインストールします
- NPM: npm i mermaid
- Yarn: yarn add mermaid
- Pnpm: pnpm add mermaid

Mermaid API:

バンドラーなしでmermaidをデプロイするには、絶対アドレスを持つscriptタグと、次の例を使用してHTMLにmermaid.initialize呼び出しを挿入します

html

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

これにより、mermaidパーサーにclass="mermaid"を持つ<div>または<pre>タグを探すように指示します。これらのタグから、mermaidは図/グラフの定義を読み取り、SVGグラフとしてレンダリングしようとします。

例はその他の例にあります

姉妹プロジェクト

支援のお願い

物事が山積みになり、ついていくのが大変です。Mermaidの今後の開発にご協力いただける開発者のコアチームを編成できれば素晴らしいと思います。

このチームの一員として、リポジトリへの書き込みアクセス権を取得し、質問や問題に答える際にプロジェクトを代表することになります。

一緒に、次のようなことで作業を続けることができます

マインドマップ、ERT図など、より多くの種類の図を追加します。
既存の図を改善する

参加にご興味がございましたら、お気軽にご連絡ください!

貢献者

Mermaidは成長を続けるコミュニティであり、常に新しい貢献者を受け入れています。支援できるさまざまな方法があり、常に助けの手を探しています！どこから支援を始めるか知りたい場合は、この問題をご覧ください。

貢献方法の詳細については、貢献ガイドラインを参照してください。

要件

ノードバージョンを管理するためのvolta。
Node.js。volta install node
pnpmパッケージマネージャー。volta install pnpm

開発インストール

bash

git clone git@github.com:mermaid-js/mermaid.git
cd mermaid
# npx is required for first install as volta support for pnpm is not added yet.
npx pnpm install
pnpm test

Lint

pnpm lint

私たちはeslintを使用しています。リアルタイムでlintの結果を得るために、エディタープラグインをインストールすることをお勧めします。

テスト

pnpm test

ブラウザでの手動テスト: dist/index.htmlを開きます。

リリース

リリース権限を持つユーザー向け

package.json内のバージョン番号を更新します。

npm publish

上記のコマンドは、distフォルダーにファイルを生成し、npmjs.comに公開します。

セキュリティと安全なダイアグラム

公開サイトの場合、インターネット上のユーザーからテキストを取得し、後でブラウザで表示するためにコンテンツを保存することは危険な場合があります。その理由は、ユーザーコンテンツに、データが表示されたときに実行される悪意のあるスクリプトが埋め込まれている可能性があるためです。Mermaidの場合、これはリスクであり、特にmermaidダイアグラムにはhtmlで使用される多くの文字が含まれているため、標準のサニタイズはダイアグラムを壊してしまうため使用できません。私たちは引き続き受信コードをサニタイズし、プロセスを改良する努力をしていますが、抜け穴がないことを保証することは困難です。

外部ユーザーを持つサイトのセキュリティをさらに強化するために、コード内のJavaScriptが実行されないように、ダイアグラムがサンドボックス化されたiframeでレンダリングされる新しいセキュリティレベルを導入しました。これは、セキュリティを向上させるための大きな一歩です。

残念ながら、このケースでは、可能な限り悪意のあるコードと一緒に、いくつかのインタラクティブ機能がブロックされることを意味します。

脆弱性の報告

脆弱性を報告するには、問題の説明、問題を作成するために実行した手順、影響を受けるバージョン、および既知の場合は問題の緩和策を記載したメールをsecurity@mermaid.liveに送信してください。

感謝

Knut Sveidqvistからの簡単なメモ

グラフィカルレイアウトと描画ライブラリを提供してくれたd3およびdagre-d3プロジェクトに心から感謝します！
また、シーケンスダイアグラムの文法を利用させていただいたjs-sequence-diagramプロジェクトにも感謝します。ガントチャートのレンダリングのインスピレーションと出発点を与えてくれたJessica Peterに感謝します。
2017年4月から共同開発者であるTyler Longに感謝します。
このプロジェクトをここまで導いてくれた、ますます増え続ける貢献者の皆様に感謝します！

Mermaidは、ドキュメントを容易にするためにKnut Sveidqvistによって作成されました。

Mermaidについて ​

図の種類 ​

インストール ​

CDN ​

Mermaidのデプロイ ​

Mermaid API: ​

姉妹プロジェクト ​

支援のお願い ​

貢献者 ​

要件 ​

開発インストール ​

Lint ​

テスト ​

リリース ​

セキュリティと安全なダイアグラム ​

脆弱性の報告 ​

感謝 ​