
ユースケース図チームが、人々や外部システムがシステムが提供する機能とどのように相互作用するかを説明するのに役立ちます。 теперь Mermaid で作成し、VPasCode でプレビューできるようになりました。この新機能により、VPasCode の「図をコードとして」サポートが拡大し、手動で各要素を描画する代わりに、テキストを使用してシステム動作を記述する別の方法が提供されます。
すでに技術ドキュメントにMermaidを使用していますか?VPasCodeをMermaid図エディタとしてユースケース図を含む、他のサポートされている図タイプとともに使用できます。無料のユースケース図エディタをお探しなら、VPasCodeエディタ.
新機能:Mermaidによるユースケース図
VPasCodeでは、すでにPlantUMLで記述されたユースケース図をサポートしていました。このアップデートにより、Mermaidのusecase-beta構文を使用できるようになりました。これはMermaid 12.0.0以降で利用可能です。この構文は、アクター、ユースケース、システム境界、およびアクターとユースケース間の関係を表します。
この追加により、ユースケースモデルを他のMermaid図と同じテキストベースのワークフローで維持しやすくなります。ソースを編集し、プレビューをレンダリングし、要件の変化に応じて図を修正できます。

例:ATMシステムのユースケース図
以下の例では、2人のアクターと、彼らがアクセスできるATMの機能を示しています。システム境界は、ATMシステムに属するユースケースをグループ化します。
usecase-beta
direction LR
actor User("User")
actor Technician("Technician")
systemBoundary "ATM System"
Withdraw("Withdraw Cash")
Transfer("Transfer Cash")
Deposit("Deposit Cash")
SettleBills("Settle Bills")
Repair("Repair ATM")
end
User --> Withdraw
User --> Transfer
User --> Deposit
User --> SettleBills
Technician --> Repair ここで、actorは、システムと相互作用する人を宣言し、各名前付きユースケースは機能を表します。systemBoundaryは、それらの機能をATMシステムの下にグループ化します。矢印は、各アクターがアクセスできる機能を示し、direction LRは、左から右へのレイアウトを要求します。
なぜユースケース図にMermaidを使用するのか?
要件、ドキュメント、またはコードと一緒にモデルを簡単に修正したい場合、テキストベースの図は実用的です。形状を手動で再配置する代わりに、ラベルを変更したり、アクターを追加したり、ソース内の関係を更新したりできます。これにより、Mermaidは初期の設計議論だけでなく、システムが進化するにつれて図を最新の状態に保つ際にも有用となります。
ユースケース図は、プロダクトマネージャー、ビジネスアナリスト、開発者、アーキテクト、およびステークホルダーがシステムのスコープに関する共通の理解を構築するのを支援できます。また、以下のような質問について議論しやすくします:
- 誰がシステムと相互作用しますか?
- システムはどのような機能を提供しますか?
- 各アクターに利用可能な機能はどれですか?
- システムのスコープはどこで始まり、どこで終わりますか?
VPasCode: ブラウザで動作する図形-as-コードエディタ
VPasCodeは、開発者、アーキテクト、および技術チーム向けのオンライン図形-as-コードプラットフォームです。サポートされているテキストベースの図形言語と構造化データを、エディタとライブプレビュー内で視覚的な図形に変換します。図形のソースとレンダリング結果の間をシームレスに移動できるように設計されています。
始めるには、エディタに図形コードを貼り付けるか記述してください。VPasCodeはサポートされているフォーマットを自動的に検出するため、言語を手動で選択する必要はありません。編集する間、プレビューはリアルタイムで更新され、変更点を素早く見つけ、図形を洗練させるのに役立ちます。
Mermaid以外にも、VPasCodeはPlantUML、D2、Graphviz、Markmap、EChartsなどの他の図形および可視化フォーマットをサポートしています。また、構造化データフォーマットやプログラミング言語とも連携します。これにより、複数の記法でシステムを文書化するチームにとって、単一のワークスペースとして有用です。
ライブプレビュー以上の機能
VPasCodeには、図形がレンダリングされた後に作業するための実用的なツールが含まれています:
- 図形の共有:共有可能なURLの作成、QRコードの生成、またはサポートされているソーシャルチャネルを通じた共有が可能です。
- 画像のエクスポート:ドキュメント、プレゼンテーション、その他の資料用に、図形をSVGまたはPNG形式でダウンロードできます。
- AIによる構文の修正:該当するプレミアム機能にアクセスできる場合、「AIで修正」を使用して構文エラーを修復し、コードの差分と変更の説明を確認できます。
- 図形ラベルの翻訳:プレミアムAI機能を使用すると、エディタ内で図形のテキストを他の言語に直接翻訳できます。
- 図形をOpenDocsに送信:該当するプレミアムアクセス権限があれば、図形をVisual Paradigm OpenDocsに送信し、技術ドキュメントで使用できます。
コア編集、ライブレンダリング、画像エクスポート、および共有は無料で利用できます。AI機能とOpenDocs連携は、対象となるVisual Paradigmプランを通じて利用可能です。プラットフォームの詳細については、VPasCode機能概要.
VPasCodeでMermaidユースケース図を試す
ATMサービスのマッピング、オンラインチェックアウトの説明、またはソフトウェア製品のアクターと機能の文書化など、どのような場合でも、VPasCodeは図形を書き、プレビューするための便利な場所を提供します。無料のユースケース図エディタとして、サポートされているMermaid構文のために、またはMermaid図形エディタとして、より広範な図形-as-コードワークフローのためにご使用ください。
VPasCodeを開いて、Mermaidのユースケース図を作成してください. 対応フォーマットと機能の詳細については、VPasCodeの概要.











