🚀 Visual Paradigmは、以下を発表することを喜んでいます：VPasCode – 当社の統合型図表記法プラットフォーム – 今やMermaid図の種類が4つ追加され、シンプルなテキスト表記で以下のプロフェッショナルな図表を生成できます：
- 🐟 イシカワ図（フィッシュボーン／原因と結果）図 – 根本原因分析が簡単になります
- ⚡ イベントモデリング図 – デザインシステムの情報フローとタイムラインの設計
- 🟡 ベン図 – 集合の関係性と交差を可視化
- 🗺️ ウォードレー図 – 戦略的バリューチェーンマッピングと進化分析
製品マネージャー、ソフトウェアアーキテクト、開発者、戦略家など、どの立場の方でも、既に知っている構文を使ってVPasCodeで図表を作成できます。リアルタイムプレビュー、ワンクリックURL共有、無料のSVG/PNGエクスポート機能付きでリアルタイムプレビュー、ワンクリックURL共有、無料のSVG/PNGエクスポート.
🔍 VPasCodeの特徴は何か？
VPasCode（以下略：Vイズアル Pアラディグムの asCodeプラットフォーム）は、統合型テキストから図表への環境。これはPlantUML、Mermaid、Graphviz、さらに多くの形式（追加の形式が近日中に登場予定）。同じエディタ内で、複数のツールを学ぶことなく、構文を自由に切り替えることができます。
この機能強化は、Mermaidの最新構文（v11.12.3+ および v11.15.0+）に焦点を当てています。以下の各新しい図形式の動作するコード例があります。VPasCodeにコピー＆ペーストするだけでOKです。
📌 1. 伊仕川図（魚骨図） – 根本原因分析
原因と結果図や魚骨図としても知られています。品質管理や問題解決の会議に最適です。
✅ 例 – 「ぼやけた写真」の根本原因分析
ishikawa-beta
ぼやけた写真
プロセス
聚焦していない
シャッタースピードが遅すぎる
保護フィルムが取り除かれていない
ビューティフィルターが適用された
ユーザー
手が震えている
機器
レンズ
適切でないレンズ
損傷したレンズ
汚れたレンズ
センサー
損傷したセンサー
汚れたセンサー
環境
対象物が速く動いた
過度に暗い
💡 構文のポイント：最初の行が問題（魚の「頭」）を定義します。インデントで階層的な原因枝（魚骨）が作成されます。
📌 2. イベントモデリング図 – 時間を経てのシステム動作
イベントモデリングは、情報がシステム内で時間とともにどのように変化するかを記述します。UI、コマンド、イベント、プロセッサをスイムレーンに整理して使用します。VPasCodeは、コンパクト構文とリラックス構文の両方をサポートしており、インラインデータや外部データブロックも利用可能です。
✅ 最小限の例 – ショッピングカートにアイテムを追加するフロー
eventmodeling
tf 01 ui カートUI
tf 02 cmd アイテム追加
tf 03 evt アイテム追加完了
✅ インラインデータの例
eventmodeling
tf 01 ui カートUI
tf 02 cmd アイテム追加 { 説明: 文字列 }
tf 03 evt アイテム追加完了 { 説明: 文字列 }
✅ データブロックと複数の参照
eventmodeling
tf 01 ui カートUI
tf 02 cmd アイテム追加 [[AddItem01]]
tf 03 evt アイテム追加完了 [[ItemAdded]]
tf 04 cmd アイテム追加 [[AddItem02]]
tf 05 evt アイテム追加完了 [[ItemAdded]]
data AddItem01 {
説明: 'john'
画像: 'avatar_john'
価格: 20.4
}
data AddItem02 {
説明: 'jack'
画像: 'avatar_jack'
価格: 12.5
}
data ItemAdded {
説明: 文字列
画像: 文字列
価格: 数値
}
✅ フレームのリセット
イベントモデリング
tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded
rf 04 evt External.InventoryChanged
tf 05 pcr InventoryProcessor
tf 06 cmd ChangeInventory
tf 07 evt Cart.InventoryChanged
💡 キーとなるトークン：tf（タイムフレーム）、rf（リセットフレーム）、ui / cmd / evt / pcr / rmo（エンティティタイプ）。名前空間として「Inventory.InventoryChanged」を使用して、別々のスイムレーンを作成します。
📌 3. ベン図 – 集合の関係性と交差
重なり合う円を使用して、集合間の論理的な関係を示します。カスタムサイズ、ラベル、テキストノード、スタイル設定をサポートしています。
✅ 基本例 – チームの重複
venn-beta
title "チームのスキルの重複"
set Frontend
set Backend
union Frontend,Backend["API設計"]
✅ サイズ、テキストノード、スタイル設定の例
venn-beta
set A["フロントエンドチーム"]:20
text A1["React"]
text A2["デザインシステム"]
set B["バックエンドチーム"]:12
text B1["API開発"]
union A,B["フルスタックスキル"]:3
text AB1["OpenAPI仕様"]
style A fill:#ff6b6b
style A,B color:#2c3e50
style A1 color:#e74c3c
💡 「:number」で円のサイズを制御し、textで集合内にラベルを追加し、styleカスタムカラー用。
📌 4. ワードレー図 – 戦略的バリューチェーンマッピング
ワードレー図は、ビジネスやシステムの構成要素、バリューチェーンにおける位置、進化段階（ジェネシス → カスタム構築 → 製品 → コモディティ）を可視化するのに役立ちます。VPasCodeは、Mermaidの公式ワードレー構文を「wardley-beta」を図の種類として使用して完全にサポートしています。wardley-betaを図の種類として使用します。
✅ 例 – ソフトウェア開発パイプライン
wardley-beta
title ソフトウェアデプロイメントパイプライン
anchor "ユーザーのニーズ" [0.95, 0.70]
component "手動デプロイ" [0.15, 0.25]
component "CI/CDスクリプト" [0.45, 0.50]
component "自動化パイプライン" [0.75, 0.65]
component "クラウドインフラストラクチャ" [0.30, 0.40]
"ユーザーのニーズ" -> "自動化パイプライン"
"自動化パイプライン" -> "CI/CDスクリプト"
"CI/CDスクリプト" -> "手動デプロイ"
"手動デプロイ" -> "クラウドインフラストラクチャ"
evolve "手動デプロイ" 0.20
evolve "CI/CDスクリプト" 0.55
evolve "自動化パイプライン" 0.85
evolve "クラウドインフラストラクチャ" 0.70
note "クラウド採用がパイプライン成熟度を加速" [0.40, 0.35]
💡 空白を含むコンポーネント名はダブルクォーテーションで囲む必要があります。座標は両軸とも0から1の範囲です（可視性対進化）。
🛠️ 今すぐVPasCodeを試してみる
へ移動：VPasCodeエディタ：https://www.vpascode.com/.
Mermaid構文モードを選択し、上記のコード例のいずれかを貼り付け、図が即座にレンダリングされるのを確認してください。
無料で始める – クレジットカード不要、インストール不要。ブラウザさえあればOKです。
📖 公式ドキュメントおよび参考資料
Visual Paradigm – プロフェッショナルなモデル化を、シンプルに。
VPasCodeは、効率性、コラボレーション、テキストベースの図作成を重視するチームのための、図をコードで表現するプラットフォームです。