Mermaid を使用してコードによるダイアグラムを作成

コードによるダイアグラムメニューにアクセス

Lucidchart のコードによるダイアグラムメニューにアクセスするには、以下の手順に従います。

1. ワークスペースの左端にあるプライマリツールバーから、 コードによるダイアグラムアイコンを選択します。

図を生成

サポートされている図のタイプの例を活用して、コードによるダイアグラムプロセスに慣れるようにします。準備ができたら、独自の Mermaid コードを書いて図を生成します。

提供された例を使用

提供された例を使用して図を作成するには、コードによるダイアグラムメニューから次の手順に従います。

1. [+ 新しいMermaid 図] を選択します。
2. 提供されたエディターの下部で、例のオプションのいずれかをクリックします。
3. 選択したサンプルタイプのコードがエディターに自動的に追加されます。
4. 必要に応じてサンプルコードを編集します。
5. [生成] をクリックします。

キャンバスに図が生成されます。

Mermaid を使用してゼロから作成

コードによるダイアグラムを使ってゼロから新しい図を作成するには、[コードとしてのダイアグラム] メニューから次の手順に従います。

1. [+ 新しいMermaid 図] を選択します。
2. 提供されたエディターにコードを入力してね。
3. [生成] をクリックします。

キャンバスに図が生成されます。

図を編集

コードから生成された図はキャンバスに画像として表示され、コードを開いて編集して更新する必要があります。以下の手順で行います。

1. 次のいずれかの方法で、関連するコードエディターを開きます。
   • キャンバス上の図をクリックします。
   • コードによるダイアグラムメニューに移動し、スクロールして、編集したいダイアグラムを選択してください。
2. エディターをクリックして変更を加えます。
   • 編集すると、キャンバス上のダイアグラムがリアルタイムで更新されます。

図がキャンバス上で更新されます。

サポートされている図の種類

以下の図タイプは Mermaid コードを使用してサポートされています。

• クラス : クラス、属性、操作やオブジェクト間の関連など、特定のシステムの構造を表します。
• C4 : 対象ユーザーに応じて、4つのレベルのモデル (コンテキスト、コンテナ、コンポーネント、コード) を活用します。
• 実体関連 : データベースを視覚的に表現して、フィールド間の関連を示します。
• フローチャート : 複雑なシステムとプロセスをカバーする、わかりやすいフローチャートを作成します。
• ガント：プロジェクトを管理する際に、スケジュールと進捗を視覚的に表す。
• 石川:根本原因分析中に原因と結果関連を視覚的にマッピングするために特性優先図を作成します。
• ネストされたツリーマップ：ネストされた長方形を使用して、階層的なデータ構造を視覚化します。
• レーダーチャート：放射状のグリッド上で複数の定量的変数を比較するチャートを作成します。
• シーケンス : 併存するプロセスやオブジェクト、ライフラインが終了する前に機能を実行するためにそれらの間で交換されるメッセージを表します。
• 状態 : さまざまなオブジェクト間の遷移を示す図を作成します。
• XYチャート：データポイント間の関係を視覚化するために、包括的な線グラフ、棒グラフ、または散布図を作成します。

よくある質問 (FAQ)

LucidchartではどのバージョンのMermaidがサポートされていますか？
Lucidchartは、Mermaidバージョン11.14をサポートするように最適化されています。

Mermaid コードを使用して生成した図のスタイルと書式を設定するにはどうすればよいですか？
Mermaid コードを使って Lucid で図を生成すると、キャンバスに画像として表示されます。図のスタイルと形式を編集するには、Mermaid スタイル構文をコードに直接含めます。

この記事へのフィードバックをお寄せください