Mermaid · 登録不要 · アップロードなし

アクティビティ図メーカー

UMLアクティビティ図をテキストとして描画。アクション、判定、平行フォーク/ジョイン、スイムレーンをMermaidフローチャートで表示 — その後エクスポート。全部がデバイス上でレンダリング。

load example
Preview

テキストで書かれたUMLアクティビティ図

アクティビティ図はフローチャートのいとこです。作業のフロー — アクション、判定、そして重要なのは作業が平行実行に分割し、再結合する点。Mermaidには専用のアクティビティ図タイプはないため、正直で完全にレンダリング可能なアプローチはUMLアクティビティ慣習に従うフローチャートです。開始と終了用の丸いターミネータ、アクション用の長方形、判定用のダイアモンド(ガード分岐付き)、フォークと結合用のラベル付きバーノード。

通常のMermaidフローチャートなので、このページのすべての例がライブレンダリングされてきれいにエクスポートされます — プラグイン、特別モードなし。

フォーク、ジョイン、スイムレーン

並行実行を表示するために、1つの「フォーク」ノードから複数の矢印をルーティング、1つの「ジョイン」ノードに戻します — 図は「これを平行実行で、完了したら続行」と読まれます。これはまさにUMLフォーク/ジョイン意味論です。フォークとジョインバーはここは通常のノード、UML同期バーのように見えるためのラベル。

ロールを割り当てるために、各ロールのアクションをサブグラフでラップ。これらのパーティションはUMLスイムレーンを近似し、顧客、サポート、またはエンジニアリングが各アクションを実行するか明確にします — プレーンテキストを離れずに。

よくある質問

UMLアクティビティ図を作成するにはどうしますか?

UMLアクティビティ慣習に従うMermaidフローチャートを使用。丸い「([Start])」と「([End])」ターミネータ、アクション用の長方形、判定用のダイアモンド、フォーク/ジョイン用のラベル付きバーノード。ライブレンダリングされ、SVGまたはPNGにエクスポートできます。

平行アクション(フォークとジョイン)を表示するにはどうしますか?

1つの「フォーク」ノードから複数の矢印をルーティング、1つの「ジョイン」ノードに戻します。「これを平行実行で、すべてが終わったら続行」と読まれます。これはUMLフォーク/ジョイン意味論と一致。

スイムレーンまたはパーティションを追加できますか?

はい — 各ロールのアクションを「subgraph Role … end」でラップ。各サブグラフはラベル付きレーンになり、各アクションを実行するのは誰か明確です。

専用アクティビティ図タイプの代わりにフローチャートを使用するのはなぜですか?

Mermaidには専用アクティビティ図構文がないため、UML慣習を持つフローチャートは実際にレンダリングするアプローチです。すべてのアクティビティ図要素を手に入れます — アクション、判定、ガード、フォーク/ジョイン、レーン — ソースは移植性のままです。

アクティビティ図はどこかにアップロードされていますか?

いいえ。Mermaidを使用してブラウザで完全にレンダリングされるため、プロセスステップと内部論理はデバイスから出ません。