vaults-diagram-tools

vaults-diagram-tools

MCP server for rendering Mermaid diagrams and generating source-code diagrams, with tools to render text/files and produce dependency/class diagrams.

Category
访问服务器

README

vaults-diagram-tools

vaults-diagram-tools repository banner

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

Mermaid to assets. Source code to maps. MCP for agents.

vaults-diagram-tools is a standalone toolkit for teams that need reproducible Mermaid SVG/JPEG assets, source-code diagrams, and agent-friendly diagram workflows without carrying Vault-specific content.

What is included

  • Mermaid renderer extracted from the Vaults toolchain.
  • Source-code to Mermaid diagram generator.
  • MCP stdio server with three explicit tools, published in MCP Registry as io.github.Malnati/vaults-diagram-tools.
  • Offline-capable release assets for zip and container distribution.
  • Packaging templates for Homebrew, deb/rpm, CDN, Docker, and Podman, plus a publishable VS Code extension package.

Content-management workflows outside diagram generation are not part of this package.

Quick start

Install in a project:

npm install -D vaults-diagram-tools

Render one Mermaid source to durable assets:

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

Generate Mermaid diagrams from source code:

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

Run the MCP stdio server:

npx vaults-diagram-mcp

Use one-shot npx when the project should not keep a dependency:

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

Core tools

Command Purpose
vaults-mermaid-render Render .mmd or .mermaid files to SVG/JPEG, manifests, and optional PNG/text sidecars.
vaults-source-diagrams Generate Mermaid diagrams from source-code structure, including focused selections and traceability metadata.
vaults-diagram-mcp Expose render_mermaid_text, render_mermaid_file, and generate_source_diagrams through MCP stdio.

Additional package binaries are compatibility entrypoints for older Vaults paths, optional text renderers, and Podman workflows.

Workflows

  • Markdown docs: keep the Mermaid source as a linked .mmd, render .svg and .jpg, and show source inline with a fenced mermaid block.
  • Source graph reviews: generate diagrams from real source paths and inspect manifest selection data for requested files, omitted connectors, and rendered outputs.
  • Agent automation: use the MCP server when clients need diagram rendering through a narrow, explicit tool surface. Current registry entry is active at version 0.1.4, and the Smithery server page is already published.
  • Release packaging: ship npm, zip, container, and offline vendor artifacts while preserving license and notice files.

Download and distribution

npm registry

Use the published npm package when you want the normal Node.js toolchain installation. Current npm latest is vaults-diagram-tools@0.1.4:

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

One-shot with npx

Use --package when the project should not keep the dependency:

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

npm package from GitHub

Use the GitHub package source when testing a commit before a registry release:

npm install github:malnati/vaults-diagram-tools
npx vaults-mermaid-render path/to/diagram.mmd --output-dir out

GitHub release assets

The latest GitHub Release, GHCR image, npm package, MCP Registry metadata, and VS Code VSIX are published at v0.1.4; the Quay.io Podman image remains at v0.1.0:

Local checkout

Use the checkout for development, validation, or release preparation:

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

Container, Docker, and Podman

Build locally:

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

Run a render from the GHCR image:

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

Run the published Podman image from Quay.io:

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 also exposes 0.1.0 and latest tags for the same published package line.

Podman helper scripts are available through vaults-mermaid-podman-build, vaults-mermaid-podman-render, and vaults-mermaid-podman-test.

CDN facade

The package is CLI-first. CDN endpoints expose browser-safe metadata/helpers only; SVG/JPEG rendering still runs through Node.js, MCP, or the container runtime.

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 extension

The desktop VS Code extension is published as malnati.vaults-diagram-tools and can also be installed directly from the GitHub Release VSIX. It bundles the npm runtime and contributes:

  • Command Palette actions for Mermaid SVG/JPEG rendering, source-diagram generation, and Markdown diagram-policy validation.
  • A native VS Code MCP server definition provider for the bundled vaults-diagram-tools stdio server.
  • Marketplace/Open VSX publish scripts used by the release workflow when VSCE_PAT and OVSX_PAT are configured.

Install options after v0.1.4 is released:

Local package validation:

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

Command line usage

After installing from npm, run public CLIs directly from node_modules/.bin, npm exec, or npx:

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

One-shot examples:

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

Local checkout equivalents:

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 tools

vaults-diagram-mcp exposes exactly three tools:

  • render_mermaid_text
  • render_mermaid_file
  • generate_source_diagrams

Example client command:

vaults-diagram-mcp

The MCP adapter passes theme and rendering options through to the same renderer used by the CLI, so a client can request theme: "dracula" and receive .svg + .jpg artifacts.

Dracula diagram examples

The diagrams below were generated by this repository with vaults-mermaid-render --theme dracula; Markdown links the generated assets instead of embedding SVG/JPEG.

Install and usage flow

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"]

Tooling architecture

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 package source graph

flowchart LR
  N1["server.mjs"]
  N2["tests/mcp-tools.test.mjs"]
  N3["tools.mjs"]
  N1 --> N3
  N2 --> N3

Brand assets

The repository, GitHub Pages landing, Actions summaries, release notes, GitHub App badge, and social preview use one deterministic brand kit generated from the current landing visual language.

Regenerate and verify the kit with:

npm run brand:generate
npm run brand:check

Compliance and artifact policy

Markdown diagram policy

Generated Markdown should link artifacts and show source in a mermaid fenced block:

#### 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 and JPEG files are delivery artifacts. Markdown should link them instead of embedding them as images by default.

Credits and license compliance

  • Project license: MIT.
  • Project notices: NOTICE.md.
  • Third-party credits and license index: THIRD_PARTY_NOTICES.md.
  • License verification: npm run license:check; refresh generated notices with npm run license:generate.
  • Dracula-colored documentation diagrams credit the MIT-licensed Dracula Theme palette through beautiful-mermaid.
  • Icon data credits include Font Awesome 4, SVG Logos by Gil Barbara, and Lucide Icons via Iconify JSON packages.
  • Release artifacts must preserve LICENSE, NOTICE.md, THIRD_PARTY_NOTICES.md, and upstream license files bundled by packaged dependencies or the offline vendor runtime.

Offline vendor runtime

The source tree does not commit node_modules. Build and release jobs create offline vendor assets with:

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

The renderer can run from normal npm dependencies during development, or from packages/renderer/vendor/node when MMDC_VENDOR_ONLY=1.

The default renderer is the Node/JS/WASM vendor path and does not require Chromium, Puppeteer, mmdc, ImageMagick, or npx. The legacy shell wrapper only uses mmdc when explicitly requested with MMDC_RENDER_ENGINE=mmdc; automatic fallback to Puppeteer is disabled.

GitHub App

The public vaults-diagram-tools GitHub App is the installable read-only app surface for this package.

  • Install URL: https://github.com/apps/vaults-diagram-tools/installations/new
  • Purpose: read-only installs for validating tags, release assets, and package metadata around this repository.
  • Permissions: repository contents read-only, plus GitHub metadata access.
  • Webhooks: disabled; this release does not run a webhook backend.
  • Marketplace: not listed in GitHub Marketplace for the current package line.
  • Secrets: no private key, client secret, or webhook secret is stored in this repository.

Distribution status

Working in v1:

  • npm package publication and GitHub install flow
  • Docker/Podman images through GHCR and Quay.io
  • MCP server
  • MCP Registry entry io.github.Malnati/vaults-diagram-tools active at version 0.1.4
  • Smithery server page for ricardomalnati/vaults-diagram-tools
  • zip release
  • GitHub Actions CI, release, CodeQL, and Pages workflows
  • Public read-only GitHub App install surface
  • Homebrewery package page with searchable tags
  • Publishable VS Code extension package with VS Code Marketplace and Open VSX workflow targets

Templates in v1:

  • Homebrew formula
  • deb/rpm through nfpm
  • CDN facade through npm/jsDelivr/unpkg

Current release

vaults-diagram-tools is published as npm 0.1.4 and MCP Registry server io.github.Malnati/vaults-diagram-tools version 0.1.4. The latest GitHub Release, GHCR image, and VS Code VSIX are v0.1.4; Quay.io carries the Podman image line at v0.1.0.

Channel Status
GitHub Release v0.1.4
Release assets vaults-diagram-tools-0.1.4.tgz, vaults-diagram-tools-0.1.4.zip, and vaults-diagram-tools-vscode-0.1.4.vsix
npm vaults-diagram-tools@0.1.4, dist-tag latest
MCP Registry io.github.Malnati/vaults-diagram-tools, status active, version 0.1.4
Smithery ricardomalnati/vaults-diagram-tools is published
Registry PR PR #17 aligned the MCP Registry publisher name and was merged.
GHCR container ghcr.io/malnati/vaults-diagram-tools:v0.1.4
Quay.io Podman image quay.io/ricardomalnati/vaults-diagram-tools:v0.1.0
Automation CI, CodeQL, Pages, and Release workflows are published through GitHub Actions.
GitHub App vaults-diagram-tools public read-only app; install.
VS Code extension Workflow target malnati.vaults-diagram-tools for Marketplace and malnati/vaults-diagram-tools for Open VSX; publication requires VSCE_PAT and OVSX_PAT.
Documentation GitHub Pages publishes the docs/ site.

Documentation

推荐服务器

Baidu Map

Baidu Map

百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。

官方
精选
JavaScript
Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。

官方
精选
本地
TypeScript
VeyraX

VeyraX

一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。

官方
精选
本地
graphlit-mcp-server

graphlit-mcp-server

模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。

官方
精选
TypeScript
Kagi MCP Server

Kagi MCP Server

一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。

官方
精选
Python
e2b-mcp-server

e2b-mcp-server

使用 MCP 通过 e2b 运行代码。

官方
精选
Neon MCP Server

Neon MCP Server

用于与 Neon 管理 API 和数据库交互的 MCP 服务器

官方
精选
Exa MCP Server

Exa MCP Server

模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。

官方
精选