documd-visuals

documd ビジュアル

このドキュメントパイプラインでレンダリングできる、あらゆる図、チャート、カード、レイアウトへのルーティングです。

図はテキストのまま、その場にあります。 Markdown に記述したフェンス（plantuml · vega · echarts · infographic）または裸の HTML がそのまま図になります。ビューアーがリアルタイムで描画し、ブロックは編集可能なままで、事前にレンダリング、ビルド、エクスポートする必要はありません。documd は任意です。エクスポートと検証にのみ使用します。

厳守事項

1. 使用できるフェンス — plantuml / puml · vega · vega-lite · echarts · infographic、 および裸の HTML — システムアーキテクチャ図、カード、ページレイアウトの描画に使用します。
2. リストにないものは使用できません。 リストに記載のないフェンスは、劣った選択肢ではなくバグです。 第 2 級のエンジンはありません。
3. フェンスごとに図は 1 つです。 1 つのブロックに 2 つのエンジンを入れないでください。また、フェンスを入れ子にしないでください。
4. HTML は裸のままにし、```html は使いません — フェンスで囲んだブロックは画像になります。ファイルを新たに作るのではなく、実在するファイルを参考にしてください。システム図には layered-with-wings.md、 カードには executive-brief-summary.md を使用します。
5. データはインラインで記述します。 vega / vega-lite / echarts には、それぞれ独自の values / series データを含める必要があります。 外部 URL はエクスポート時に安定して利用できません。
6. 本文で図の読み取り方を示します。 すべての図は 1 つの問いに答えます。その問いを本文またはブロックの title に記述してください。
7. テーマを選んでから、そのテーマに沿って色を選びます。 色は styles/palette.md にまとめられているテーマのいずれかから選びます。そのテーマのブロックを使用するエンジン向けにコピーし、すべての値をそこから選んでください。手作業で選んだ 16 進数カラーや、1 つの図で 2 つのテーマを使うことはバグです。チャートではカテゴリ別ランプを順番に使用し、カードではアクセントカラー 1 色とニュートラルカラーを使用します。

目的別の選び方

読者の目的を見つけ、目的別ガイドを開いて、例を選んでください。エンジンは参考情報です。正式な基準となるのはガイドと例です。

A — データと指標

目的	トリガーとなるキーワード	エンジン	参照先
service-reliability	レイテンシ · p95/p99 · SLO · SLA · エラーバジェット · バーンレート · 可用性 · アップタイム · 信頼性	echarts vega infographic	goals/service-reliability.md
ops-monitoring	インシデント負荷 · アラート件数 · 外れ値 · 異常 · サービススコアカード · サポート件数	echarts vega infographic	goals/ops-monitoring.md
delivery-throughput	スループット · サイクルタイム · リードタイム · ベロシティ · キャパシティ · 人員配置 · バックログ · WIP · ランクの変動	echarts vega infographic	goals/delivery-throughput.md
goal-and-status-reporting	OKR · KPI · 目標と実績 · 目標達成度 · ステータスボード · ダッシュボード · スコアカード	echarts vega infographic html-css	goals/goal-and-status-reporting.md
product-metrics	コンバージョン · ファネル · 導入 · 継続率 · 解約 · アクティベーション · サインアップ · コホート · 実験	echarts infographic	goals/product-metrics.md
business-reporting	四半期業績 · 売上 · ARR · 売上構成 · 利益率 · 定期業績 · 予測	infographic vega echarts	goals/business-reporting.md
go-to-market	パイプライン · チャネル · パートナー · パートナー階層 · 市場参入 · セールスファネル · SWOT · キャンペーン	echarts infographic	goals/go-to-market.md
cost-and-budget	コスト · 支出 · 予算 · クラウド料金 · 節約 · コスト削減 · 設備投資 · ユニットエコノミクス	echarts infographic vega	goals/cost-and-budget.md
data-exploration	相関 · 分布 · 回帰 · 外れ値検出 · 欠損データ · スモールマルチプル · 密度	vega echarts	goals/data-exploration.md

B — プロセスとシステム

目標	トリガーキーワード	エンジン	参照
engineering-operations	スタンドアップ · スプリントの定例 · チームのリズム · オンコール · 対応範囲 · シフトの引き継ぎ · デプロイの頻度 · チェックリスト	infographic vega echarts	goals/engineering-operations.md
incident-management	インシデント · ポストモーテム · エスカレーション · トリアージ · ランブック · 変更リクエスト · リリース準備状況 · レビュー	infographic echarts html-css	goals/incident-management.md
process-and-workflow	承認 · ワークフロー · スイムレーン · SOP · プロセスマップ · BPMN · ゲート · 調達	plantuml infographic	goals/process-and-workflow.md
software-design	クラス · ドメインモデル · コンポーネント · パッケージ · レイヤリング · ユースケース · オブジェクト · C4 コンテナー · SysML	plantuml	goals/software-design.md
software-behaviour	ステートマシン · ライフサイクル · シーケンス · インタラクション · メッセージング · イベントフロー · EIP · デプロイメント	plantuml	goals/software-behaviour.md
dependencies-and-relations	依存関係 · コールグラフ · 影響分析 · 結合度 · オーナーシップ · 因果関係 · フィッシュボーン	plantuml vega echarts infographic	goals/dependencies-and-relations.md
system-architecture	システムアーキテクチャ · レイヤースタック · ゾーン · パイプラインの段階 · サービスカタログ · リクエスト経路 · コネクター	html-css	goals/system-architecture.md

C — インフラストラクチャとガバナンス

目標	トリガーキーワード	エンジン	参照
cloud-architecture	AWS · Azure · Kubernetes · コンテナー · サーバーレス · IoT · エッジ · VPC · オブザーバビリティ	plantuml infographic	goals/cloud-architecture.md
data-platform	ETL · レイクハウス · データウェアハウス · CDC · ストリーミング · 取り込み · カタログ · ML パイプライン · ER モデル	plantuml	goals/data-platform.md
network-topology	ネットワーク · トポロジー · DMZ · ワイヤレス · ファイアウォール · スイッチ · パケット · ルート · トラフィック	plantuml echarts	goals/network-topology.md
security-and-compliance	ゼロトラスト · IAM · 暗号化 · 脅威モデル · 信頼境界 · コントロール · エビデンス · 監査 · コンプライアンス · リスク	plantuml infographic html-css	goals/security-and-compliance.md
enterprise-architecture	ArchiMate · ケイパビリティマップ · バリューストリーム · ステークホルダーマップ · ビジネスアーキテクチャ	plantuml infographic	goals/enterprise-architecture.md
organization-and-roles	組織図 · レポートライン · ワークフォース · ケイパビリティの網羅状況 · ケイパビリティ成熟度 · 引き継ぎ · 責任	infographic vega echarts html-css	goals/organization-and-roles.md
people-and-hiring	採用 · 人員計画 · 面接プロセス · オンボーディング · キャリアラダー · 認定資格 · 昇進	infographic	goals/people-and-hiring.md

D — ナレッジと表現

目標	トリガーキーワード	エンジン	読む
ナレッジとアウトライン	マインドマップ · アウトライン · ナレッジマップ · コンセプトマップ · トピック · ワードクラウド	plantuml infographic vega echarts	goals/knowledge-and-outline.md
計画とロードマップ	ロードマップ · マイルストーン · タイムライン · ガント · 四半期計画 · リリーススケジュール · 戦略の重点	infographic vega plantuml html-css	goals/planning-and-roadmap.md
移行と展開	移行 · 切り替え · 段階的な展開 · 段階的なデリバリー · プログラム · 作業分解	plantuml infographic	goals/migration-and-rollout.md
比較と選定	比較 · 対比 · 内製か購入か · 意思決定記録 · 象限 · ベンダー選定 · トレードオフ · 優先度	infographic html-css	goals/comparison-and-selection.md
社内文書	メモ · ブリーフ · 憲章 · 要約 · ポリシー · 引用 · 原則	html-css infographic	goals/internal-documents.md
カタログとインベントリ	カタログ · インベントリ · 利用権 · 提供サービス · 標準ツール · サポート階層	infographic	goals/catalogues-and-inventories.md
顧客・パートナー向けコミュニケーション	顧客事例 · ケーススタディ · 営業ブリーフ · 会報 · 発表 · パートナー向けブリーフ · 教育モジュール	html-css	goals/customer-and-partner-comms.md
テーマとトーン	印刷 · コピー · 配布資料 · 弱視 · 大活字 · 色覚特性 · スライド · 投影 · 長文	infographic echarts plantuml	goals/theme-and-tone.md

エンジン早見表

エンジン	適している用途	別の方法を検討する場合
plantuml	UML／ArchiMate／BPMN のセマンティクス、ブランドやデバイスのアイコン（9,514 個のステンシル）、または自動レイアウトが望ましい関係グラフ	チャートの場合
vega / vega-lite	データの事前処理が必要な場合 — 結合、ウィンドウ、折り畳み、回帰、密度、ファセット、小分割チャート	重厚なスタイルを適用した、洗練されたチャート 1 つ（echarts）
echarts	レポート品質のチャートや KPI ダッシュボード：軸、系列、しきい値、注釈、ゲージ	データの事前変換が必要な場合
infographic	デザインされた見た目のボード：ロードマップ、タイムライン、チェックリスト、比較、象限、ナレッジマップ	軸、複数の系列、または統計的な図形（echarts）
HTML/CSS	カード、メモ、概要、ページレベルのレイアウト	別のエンジンですでにその図を描画できる場合

詳細、制限事項、注意点：plantuml · echarts · vega · infographic · html-css。

機能の境界

以下は実現できません。再試行せず、代替手段を選んでください。

要望	代替手段
3D／地球儀／WebGL チャート（echarts-gl なし）	2D の echarts、形状には scatter／graph
地理マップ（同梱のマップデータなし、オフラインで GeoJSON を利用不可）	模式的な矩形レイアウト、または HTML/CSS の地域図
ECharts の dataset.transform（6.1.0 では RangeError が発生）	上流で並べ替えと派生処理を行い、その後 dataset.source を使用
echarts オプション内の関数（JSON として解析される）	テンプレート文字列（"{c}%"）、項目ごとのラベルオブジェクト
外部データや画像（data.url、リモート URL）	インラインの values、データ URL
PlantUML の WBS／Salt／Timing／ditaa／JSON／YAML／EBNF／nwdiag／SDL／math（解析できても、実用的な図は描画されない）	@startmindmap、ボックス型の矩形ツリー、HTML/CSS のモックアップ、またはコードフェンス
インタラクティブなチャート（ツールチップ、ズーム、ブラシ）	ラベル、しきい値、吹き出しを直接追加して注釈
vega／echarts のアイコン	plantuml のステンシル
infographic での自由な位置指定	ピクセル単位で制御できる HTML/CSS

ドキュメントを読む

ブラウザーまたは VS Code でドキュメントを読むには、docu.md Markdown Viewer をインストールしてください： https://docu.md.

エクスポートと検証 — 任意

作成時には必要ありません。documd CLI は、ドキュメントまたは図のソースをファイルに変換し、図を画像として抽出して、ブロックが正しくレンダリングされるか検証します。出力先がファイルの場合に使用します。インストールは不要です：npx @markdown-viewer/documd in.md out.docx。フラグ、形式、npm スコープに関する注意事項： converting.md。

ブロックがレンダリングされない場合

1. 許可リストにあるフェンスですか？図ごとにブロックは1つだけですか？
2. そのエンジンのリファレンスに記載されているアンチパターンに該当しますか（エンジン早見表を参照）？それとも構文が厳格ですか（echarts／vega の JSON、プレーンな HTML では空行不可）？
3. それでも解決しない場合は、目的ガイドに記載されている代替エンジンに切り替えてください。ほとんどのシナリオには2つの選択肢があります。
4. または、レンダリングして検証します：npx @markdown-viewer/documd file.md --assets /tmp/figs。

各項目の場所

catalog/scenarios.md には、すべてのシナリオがドメイン、エンジン、ティア、サンプルパスとともに一覧されています。まずここから確認し、次に goals/<domain>.md、engines/<engine>.md、examples/<domain>/<file>.md を参照してください。