mcpField
V
Vaults Diagram Tools

Vaults Diagram Tools

ローカル
malnati.github.io開発ツール025 週間前に更新
リポジトリ公式サイト

Vaults Diagram Tools について

Vaults Diagram Toolsは、Mermaidの成果物を生成し、ソースコードの構造から図を作るツールキットです。開発チームやエージェント向けに、コマンドライン、複数の配布方法、3つの図表ツールを備えたMCPサーバーを提供します。

主な機能

  1. 01MermaidファイルをSVGとJPEGにレンダリング
  2. 02ソースコードからMermaid図を生成
  3. 03マニフェストと任意の付随出力を作成
  4. 04コマンドライン、コンテナ、GitHub Actionsで実行
  5. 05VS Code拡張機能とオフライン用成果物を提供

活用シーン

  1. 01Markdownドキュメント用の図表成果物を生成
  2. 02生成した図でソースコード構造を確認
  3. 03GitHub Actionsで図表生成を自動化
  4. 04エージェントからMCP経由で図をレンダリング

MCP 対応

stdio MCPサーバーは、`render_mermaid_text`、`render_mermaid_file`、`generate_source_diagrams`をMCPクライアントに公開します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "malnati-vaults-diagram-tools": {
      "command": "npx",
      "args": [
        "-y",
        "vaults-diagram-tools"
      ]
    }
  }
}
起動コマンドnpx -y vaults-diagram-tools

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmvaults-diagram-tools0.1.4

ツール

3

掲載時のツール一覧 · 3 週間前に更新

パラメーター型必須説明
pngbooleanいいえ
asciibooleanいいえ
themestringいいえ
sourcestringはい
fileNamestringいいえ
asciiModeenumいいえunicode | ascii
outputDirstringいいえ
backgroundstringいいえ

詳細

vaults-diagram-tools

vaults-diagram-tools リポジトリのバナー

CI Release License: MIT Node.js >=20.11 Docs Container Quay.io

Mermaid をアセットに。ソースコードを図に。エージェント向け MCP。

vaults-diagram-tools は、Vault 固有のコンテンツを含めずに、再現可能な Mermaid SVG/JPEG アセット、ソースコード図、エージェントに使いやすい図のワークフローを必要とするチーム向けのスタンドアロンツールキットです。

含まれるもの

  • Vaults ツールチェーンから抽出した Mermaid レンダラー。
  • ソースコードから Mermaid 図を生成するツール。
  • 明示的なツールを3つ備え、MCP Registry に io.github.Malnati/vaults-diagram-tools として公開されている MCP stdio サーバー。
  • zip およびコンテナー配布用のオフライン対応リリースアセット。
  • レンダリング、ソース、ポリシーの自動化に対応する専用の GitHub Actions Marketplace ラッパーリポジトリ。
  • Homebrew、deb/rpm、CDN、Docker、Podman 用のパッケージテンプレートと、公開可能な VS Code 拡張機能パッケージ。

図の生成以外のコンテンツ管理ワークフローは、このパッケージには含まれません。

クイックスタート

プロジェクトにインストールします：

npm install -D vaults-diagram-tools

1つの Mermaid ソースから永続的なアセットをレンダリングします：

npx vaults-mermaid-render path/to/diagram.mmd --output-dir out --manifest out/manifest.json

ソースコードから Mermaid 図を生成します：

npx vaults-source-diagrams --source-dir src --output-dir diagrams

MCP stdio サーバーを実行します：

npx vaults-diagram-mcp

プロジェクトに依存関係を残したくない場合は、ワンショットの npx を使用します：

npx --yes --package vaults-diagram-tools vaults-mermaid-render path/to/diagram.mmd --output-dir out
npx --yes --package vaults-diagram-tools vaults-source-diagrams --source-dir src --output-dir diagrams
npx --yes --package vaults-diagram-tools vaults-diagram-mcp

コアツール

コマンド用途
vaults-mermaid-render.mmd または .mermaid ファイルを SVG/JPEG、マニフェスト、およびオプションの PNG/テキストサイドカーにレンダリングします。
vaults-source-diagramsフォーカスを絞った選択やトレーサビリティメタデータを含め、ソースコードの構造から Mermaid 図を生成します。
vaults-diagram-mcpMCP stdio 経由で render_mermaid_text、render_mermaid_file、generate_source_diagrams を公開します。

追加のパッケージバイナリは、旧 Vaults パス、オプションのテキストレンダラー、Podman ワークフロー用の互換エントリーポイントです。

ワークフロー

  • Markdown ドキュメント： Mermaid のソースをリンク付きの .mmd として保持し、.svg と .jpg をレンダリングし、フェンス付きの mermaid ブロックでソースをインライン表示します。
  • ソースグラフのレビュー： 実際のソースパスから図を生成し、要求されたファイル、除外されたコネクター、レンダリング済みの出力に関するマニフェストの選択データを確認します。
  • エージェントの自動化： クライアントが明確で限定されたツール群を通じて図のレンダリングを必要とする場合は、MCP サーバーを使用します。現在のレジストリーエントリーはバージョン 0.1.4 で有効になっており、Smithery サーバーページもすでに公開されています。
  • リリースパッケージ： ライセンスファイルと通知ファイルを維持しながら、npm、zip、コンテナー、オフラインベンダーの各アーティファクトを配布します。

ダウンロードと配布

npm レジストリー

通常の Node.js ツールチェーンでインストールする場合は、公開済みの npm パッケージを使用します。現在の npm 最新版は [email protected] です。

npm install -D vaults-diagram-tools
npx vaults-mermaid-render path/to/diagram.mmd --output-dir out --manifest out/manifest.json
npx vaults-source-diagrams --source-dir src --output-dir diagrams
npx vaults-diagram-mcp
npx によるワンショット実行

プロジェクトに依存関係を残したくない場合は、--package を使用します。

npx --yes --package vaults-diagram-tools vaults-mermaid-render path/to/diagram.mmd --output-dir out
npx --yes --package vaults-diagram-tools vaults-source-diagrams --source-dir src --output-dir diagrams
npx --yes --package vaults-diagram-tools vaults-diagram-mcp
GitHub Actions Marketplace

プロジェクトローカルのスクリプトを追加せずに GitHub Actions 内で図のワークフローを実行する場合は、専用の Marketplace アクションを使用します。

steps:
  - uses: actions/checkout@v4
  - name: Render Mermaid assets
    id: diagrams
    uses: Malnati/vaults-diagram-tools-action@v0
    with:
      mode: render
      input: docs/diagrams
      output-dir: diagram-assets
  - name: Upload diagram assets
    uses: actions/upload-artifact@v4
    with:
      name: diagram-assets
      path: ${{ steps.diagrams.outputs.output-dir }}
GitHub の npm パッケージ

レジストリーへのリリース前にコミットをテストする場合は、GitHub のパッケージソースを使用します。

npm install github:malnati/vaults-diagram-tools
npx vaults-mermaid-render path/to/diagram.mmd --output-dir out
GitHub リリースアセット

最新の GitHub Release、GHCR イメージ、npm パッケージ、MCP Registry のメタデータ、VS Code VSIX は v0.1.4 で公開されています。Quay.io の Podman イメージは v0.1.0 のままです。

ローカルチェックアウト

開発、検証、またはリリース準備にはチェックアウトを使用します。

git clone https://github.com/malnati/vaults-diagram-tools.git
cd vaults-diagram-tools
npm ci
npm test
node packages/renderer/render-mermaid-assets.mjs examples/simple/flowchart.mmd --output-dir tmp/rendered
node packages/source-diagrams/source-diagrams.mjs --source-dir packages/mcp --output-dir tmp/source-diagrams
node packages/mcp/server.mjs
コンテナー、Docker、Podman

ローカルでビルドします。

docker build -f containers/Containerfile -t vaults-diagram-tools:local .
podman build -f containers/Containerfile -t vaults-diagram-tools:local .

GHCR イメージからレンダリングを実行します。

docker run --rm \
  -v "$PWD/examples/simple:/work/input:ro" \
  -v "$PWD/tmp/container-output:/work/output:rw" \
  ghcr.io/malnati/vaults-diagram-tools:v0.1.4 \
  --output-dir /work/output /work/input/flowchart.mmd

Quay.io の公開済み Podman イメージを実行します。

podman run --rm \
  -v "$PWD/examples/simple:/work/input:ro" \
  -v "$PWD/tmp/container-output:/work/output:rw" \
  quay.io/ricardomalnati/vaults-diagram-tools:v0.1.0 \
  --output-dir /work/output /work/input/flowchart.mmd

Quay.io では、同じ公開済みパッケージ系列に対して 0.1.0 と latest のタグも提供されています。

Podman ヘルパースクリプトは、vaults-mermaid-podman-build、vaults-mermaid-podman-render、vaults-mermaid-podman-test を通じて利用できます。

CDN ファサード

このパッケージは CLI を中心としています。CDN エンドポイントが公開するのはブラウザーで安全に扱えるメタデータ／ヘルパーのみです。SVG/JPEG のレンダリングは引き続き Node.js、MCP、またはコンテナーランタイムを通じて実行されます。

https://cdn.jsdelivr.net/npm/vaults-diagram-tools/packaging/cdn/vaults-diagram-tools.mjs
https://unpkg.com/vaults-diagram-tools/packaging/cdn/vaults-diagram-tools.mjs
VS Code 拡張機能

デスクトップ版 VS Code 拡張機能は malnati.vaults-diagram-tools として公開されており、GitHub Release の VSIX から直接インストールすることもできます。ハイブリッドランタイムを使用しており、バンドルされたオフラインフォールバックに加えて、拡張機能を再公開せずに vaults-diagram-tools@latest に追従できる管理キャッシュを備えています。次の機能を提供します。

  • Mermaid SVG/JPEG のレンダリング、ソース図の生成、Markdown 図ポリシーの検証を行うコマンドパレットのアクション。
  • ランタイムコマンド：管理ランタイムを今すぐ更新、ランタイムの状態を表示、バンドルされたランタイムを強制的に使用。
  • 解決済みの vaults-diagram-tools stdio サーバー用の、ネイティブな VS Code MCP サーバー定義プロバイダー。
  • 認証済みのローカルシェルから手動で公開するための、Marketplace/Open VSX 公開スクリプト。npm、VS Code Marketplace、Open VSX の認証情報はローカルターミナルに保管してください。GitHub Actions はこれらのシークレットを使用しません。

v0.1.4 リリース後のインストール方法：

ローカルでのパッケージ検証：

npm run vscode:install
npm run vscode:test
npm run vscode:package
code --install-extension dist/vaults-diagram-tools-vscode-0.1.4.vsix

ローカルでの順次公開：

make auth
make publish-all

make publish-all は、まずローカルターミナルでの認証を行い、ガード専用のリリースメタデータを検証して、成果物をパッケージ化し、GitHub タグとリリースを作成した後、npm、VS Code Marketplace、Open VSX、GHCR、Quay.io、MCP Registry に公開し、最後に公開状況を確認します。現在のバージョン／タグ／npm パッケージがすでに存在する場合は失敗します。実行前にリリースメタデータを更新してコミットしてください。

コマンドラインの使用方法

npm からインストールした後、node_modules/.bin、npm exec、または npx から公開 CLI を直接実行します。

vaults-mermaid-render path/to/diagram.mmd --output-dir out --png --ascii --manifest out/manifest.json
vaults-source-diagrams --source-dir src --output-dir diagrams --langs auto --diagrams dependency,class
vaults-diagram-mcp

単発の実行例：

npx --yes --package vaults-diagram-tools vaults-mermaid-render examples/simple/flowchart.mmd --output-dir tmp/vaults-diagram-tools
npx --yes --package vaults-diagram-tools vaults-source-diagrams --source-dir packages/mcp --output-dir tmp/source-diagrams --render-mode placeholder
npx --yes --package vaults-diagram-tools vaults-diagram-mcp

ローカルチェックアウトでの同等のコマンド：

node packages/renderer/render-mermaid-assets.mjs examples/simple/flowchart.mmd --output-dir tmp/vaults-diagram-tools
node packages/source-diagrams/source-diagrams.mjs --source-dir packages/mcp --output-dir tmp/source-diagrams
node packages/mcp/server.mjs

MCP ツール

vaults-diagram-mcp は、次の 3 つのツールのみを公開します。

  • render_mermaid_text
  • render_mermaid_file
  • generate_source_diagrams

クライアントコマンドの例：

vaults-diagram-mcp

MCP アダプターはテーマとレンダリングオプションを CLI と同じレンダラーに渡すため、クライアントは theme: "dracula" をリクエストして、.svg と .jpg の成果物を受け取ることができます。

Dracula 図の例

以下の図は、このリポジトリで vaults-mermaid-render --theme dracula を使って生成したものです。Markdown では SVG/JPEG を埋め込まず、生成されたアセットへのリンクを使用しています。

インストールと使用のフロー
flowchart LR
  Install["Install"] --> Npm["npm registry"]
  Install --> Npx["npx one-shot"]
  Install --> GitHub["GitHub npm"]
  Install --> Local["Local checkout"]
  Install --> Container["Docker Podman GHCR Quay.io"]

  Npm --> Cli["Public CLIs"]
  Npx --> Cli
  GitHub --> Cli
  Local --> Cli
  Container --> Cli

  Cli --> Render["vaults-mermaid-render"]
  Cli --> Source["vaults-source-diagrams"]
  Cli --> Mcp["vaults-diagram-mcp"]

  Render --> Svg["SVG Dracula"]
  Render --> Jpg["JPEG Dracula"]
  Source --> Mermaid["Mermaid source"]
  Source --> Svg
  Mcp --> Tools["3 explicit MCP tools"]
ツール構成
flowchart TB
  User["User or agent"] --> Markdown["Markdown docs"]
  User --> Cli["CLI workflow"]
  User --> McpClient["MCP client"]

  Cli --> Renderer["vaults-mermaid-render"]
  Cli --> SourceDiagrams["vaults-source-diagrams"]
  McpClient --> McpServer["vaults-diagram-mcp"]
  McpServer --> Renderer
  McpServer --> SourceDiagrams

  SourceDiagrams --> SourceTree["Source tree"]
  SourceDiagrams --> GeneratedMmd["Generated .mmd"]
  GeneratedMmd --> Renderer

  Renderer --> Svg[".svg"]
  Renderer --> Jpeg[".jpg"]
  Renderer --> Manifest["manifest.json"]

  Svg --> Markdown
  Jpeg --> Markdown
  GeneratedMmd --> Markdown
MCP パッケージのソースグラフ
flowchart LR
  N1["server.mjs"]
  N2["tests/mcp-tools.test.mjs"]
  N3["tools.mjs"]
  N1 --> N3
  N2 --> N3

ブランドアセット

このリポジトリ、GitHub Pages のランディングページ、Actions のサマリー、リリースノート、GitHub App バッジ、ソーシャルプレビューでは、現在のランディングページのビジュアルスタイルをもとに生成した、決定論的なブランドキットを使用しています。

次のコマンドでキットを再生成して検証できます。

npm run brand:generate
npm run brand:check

コンプライアンスと成果物ポリシー

Markdown 図表ポリシー

生成する Markdown では、成果物へのリンクを記載し、ソースを mermaid のフェンス付きコードブロックで表示してください。

#### Diagram title
- Links: [Mermaid source](docs/assets/diagrams/install-usage-flow.mmd) / [SVG](docs/assets/diagrams/install-usage-flow.svg) / [JPEG](docs/assets/diagrams/install-usage-flow.jpg)

```mermaid
flowchart TD
  A["Source"] --> B["Rendered assets"]
```

SVG ファイルと JPEG ファイルは配布用成果物です。Markdown では、既定で画像として埋め込むのではなく、リンクしてください。

クレジットとライセンスの遵守
  • プロジェクトライセンス：MIT。
  • プロジェクトの通知：NOTICE.md。
  • サードパーティのクレジットとライセンス一覧：THIRD_PARTY_NOTICES.md。
  • ライセンスの検証：npm run license:check。生成済みの通知を更新するには npm run license:generate を実行してください。
  • Dracula 色のドキュメント図表では、beautiful-mermaid を通じて、MIT ライセンスの Dracula Theme パレットのクレジットを表示します。
  • アイコンデータのクレジットには、Font Awesome 4、Gil Barbara による SVG Logos、および Iconify JSON パッケージを通じた Lucide Icons が含まれます。
  • リリース成果物には、LICENSE、NOTICE.md、THIRD_PARTY_NOTICES.md、およびパッケージ化された依存関係やオフラインベンダーランタイムに同梱されている上流のライセンスファイルを保持する必要があります。

オフラインベンダーランタイム

ソースツリーには node_modules はコミットされていません。ビルドジョブとリリースジョブでは、次のコマンドでオフラインベンダーアセットを作成します。

npm run vendor:refresh
npm run test:vendor:offline

レンダラーは、開発時には通常の npm 依存関係を使用して実行できます。また、MMDC_VENDOR_ONLY=1 の場合は packages/renderer/vendor/node から実行できます。

既定のレンダラーは Node/JS/WASM ベンダーパスを使用するため、Chromium、Puppeteer、mmdc、ImageMagick、または npx は不要です。レガシーのシェルラッパーが mmdc を使用するのは、MMDC_RENDER_ENGINE=mmdc を明示的に指定した場合のみです。Puppeteer への自動フォールバックは無効になっています。

GitHub App

公開中の vaults-diagram-tools GitHub App は、このパッケージ向けのインストール可能な読み取り専用アプリです。

  • インストール URL：https://github.com/apps/vaults-diagram-tools/installations/new
  • 目的：このリポジトリに関連するタグ、リリース成果物、パッケージメタデータの検証を行う読み取り専用のインストールです。
  • 権限：リポジトリコンテンツへの読み取り専用アクセス、および GitHub メタデータへのアクセス。
  • Webhook：無効です。このリリースでは Webhook バックエンドを実行しません。
  • GitHub Actions Marketplace：Vaults Diagram Tools は、専用の Malnati/vaults-diagram-tools-action ラッパーリポジトリ向けの Marketplace 対象です。
  • シークレット：このリポジトリには、秘密鍵、クライアントシークレット、Webhook シークレットは保存されていません。

配布状況

v1 で利用可能：

  • npm パッケージの公開と GitHub のインストールフロー
  • GHCR および Quay.io 経由の Docker/Podman イメージ
  • MCP サーバー
  • MCP Registry エントリ io.github.Malnati/vaults-diagram-tools：バージョン 0.1.4 で有効
  • ricardomalnati/vaults-diagram-tools の Smithery サーバーページ
  • zip リリース
  • GitHub Actions の CI、リリース、CodeQL、Pages ワークフロー
  • レンダリング／ソース／ポリシーの自動化に対応する GitHub Actions Marketplace Action Vaults Diagram Tools
  • 公開の読み取り専用 GitHub App インストール機能
  • 検索可能なタグを備えた Homebrewery パッケージページ
  • VS Code Marketplace および Open VSX のワークフロー対象に対応する、公開可能な VS Code 拡張機能パッケージ

v1 のテンプレート：

  • Homebrew formula
  • nfpm 経由の deb/rpm
  • npm/jsDelivr/unpkg 経由の CDN ファサード

現在のリリース

vaults-diagram-tools は npm 0.1.4 および MCP Registry サーバー io.github.Malnati/vaults-diagram-tools バージョン 0.1.4 として公開されています。最新の GitHub Release、GHCR イメージ、VS Code VSIX は v0.1.4 で、Quay.io では Podman イメージの系列として v0.1.0 が公開されています。

チャネルステータス
GitHub Releasev0.1.4
リリースアセットvaults-diagram-tools-0.1.4.tgz、vaults-diagram-tools-0.1.4.zip、および vaults-diagram-tools-vscode-0.1.4.vsix
npm[email protected]、dist-tag latest
GitHub Actions MarketplaceVaults Diagram Tools を対象とし、Malnati/vaults-diagram-tools-action のタグ v0.1.4 と v0 によって提供されています
MCP Registryio.github.Malnati/vaults-diagram-tools、ステータス active、バージョン 0.1.4
Smitheryricardomalnati/vaults-diagram-tools が公開されています
Registry PRPR #17 で MCP Registry の公開者名を統一し、マージされました。
GHCR コンテナーghcr.io/malnati/vaults-diagram-tools:v0.1.4。今後のコンテナー公開は GitHub Actions 外で手動で行います。
Quay.io Podman イメージquay.io/ricardomalnati/vaults-diagram-tools:v0.1.0
自動化CI、CodeQL、Pages、Release の各ワークフローは GitHub Actions で実行されます。リリースではアーティファクトの検証とパッケージ化のみを行います。npm、VS Code Marketplace、Open VSX、コンテナレジストリ、MCP Registry への公開は、ローカル端末から手動で行います。
GitHub App公開読み取り専用アプリ vaults-diagram-tools。インストール。
VS Code 拡張機能VSIX は GitHub Release に添付されています。Marketplace の対象 malnati.vaults-diagram-tools と Open VSX の対象 malnati/vaults-diagram-tools は、GitHub Actions 外で手動で公開されます。
ドキュメントGitHub Pages で docs/ サイトを公開しています。

ドキュメント

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。