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.
README
vaults-diagram-tools

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.
- GitHub Pages documentation
- npm package
vaults-diagram-tools@0.1.4 - MCP Registry
io.github.Malnati/vaults-diagram-tools - Smithery server
- GitHub release v0.1.4
- Quay.io Podman image
quay.io/ricardomalnati/vaults-diagram-tools:v0.1.0 - GitHub App
- Brand assets
- Homebrewery package page
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.svgand.jpg, and show source inline with a fencedmermaidblock. - 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:
- vaults-diagram-tools-0.1.4.tgz
- vaults-diagram-tools-0.1.4.zip
- vaults-diagram-tools-vscode-0.1.4.vsix
ghcr.io/malnati/vaults-diagram-tools:v0.1.4quay.io/ricardomalnati/vaults-diagram-tools: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-toolsstdio server. - Marketplace/Open VSX publish scripts used by the release workflow when
VSCE_PATandOVSX_PATare 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_textrender_mermaid_filegenerate_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
- Links: Mermaid source / 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"]
Tooling architecture
- Links: Mermaid source / SVG / JPEG
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
- Links: Generated index / Mermaid source / SVG / JPEG
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.
- Brand manifest
- Logo SVG / Logo PNG
- Repository banner
- Social preview PNG / Social preview JPEG
- GitHub App badge
- Actions banner
- Release banner
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 withnpm 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-toolsactive at version0.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
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.