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

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

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

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

図を生成

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

提供された例を使用

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

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

コードを追加および編集すると、キャンバスにダイアグラムが生成されます。

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

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

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

コードを追加および編集すると、キャンバスにダイアグラムが生成されます。

図を編集

コードから生成された図は、コードを開いて編集して更新する必要があります。以下の手順で行います。

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

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

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

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

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

よくある質問 (FAQ)

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

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