@diagrammo/dgmo-mcp

MCP server for rendering DGMO diagrams. Works with Claude Desktop, Claude Code, and any MCP-compatible AI tool.

Tools

Tool	Description
render_diagram	Render DGMO markup to SVG or PNG
share_diagram	Generate a shareable diagrammo.app URL
open_in_app	Open diagram in Diagrammo desktop app (falls back to browser if app not installed)
list_chart_types	List all supported chart types
get_language_reference	Get DGMO syntax documentation
preview_diagram	Render one or more diagrams and open an HTML preview in the browser
generate_report	Generate a polished HTML report with multiple diagrams, ToC, and optional source

preview_diagram

Renders one or more DGMO diagrams to SVG and opens a self-contained HTML page in the default browser. The page includes a light/dark theme toggle and responsive SVG layout.

Parameter	Type	Default	Description
diagrams	[{ title?, dgmo }]	(required)	One or more diagrams to preview
theme	'light' | 'dark'	'light'	Color theme for rendered SVGs
palette	string	'nord'	Color palette
include_source	boolean	false	Show DGMO source in collapsible blocks

A single diagram renders as a simple preview page. Multiple diagrams produce a report-style layout with a table of contents (when >3 sections). If some diagrams fail to render, successful ones are shown with error placeholders for the failures.

generate_report

Generates a polished multi-section HTML report and optionally opens it in the browser. Includes a title, optional subtitle, auto-generated table of contents, per-section descriptions, and a timestamp footer. Suitable for bundling project analysis into a shareable document.

Parameter	Type	Default	Description
title	string	(required)	Report title
subtitle	string	—	Optional subtitle
sections	[{ title, description?, dgmo }]	(required)	Report sections, each with a diagram
theme	'light' | 'dark'	'light'	Color theme for rendered SVGs
palette	string	'nord'	Color palette
include_source	boolean	false	Show DGMO source in collapsible blocks
open	boolean	true	Open the report in the browser

Setup

Claude Code

Add to your project's .claude/settings.local.json:

{
  "mcpServers": {
    "dgmo": {
      "command": "npx",
      "args": ["-y", "@diagrammo/dgmo-mcp"]
    }
  }
}

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "dgmo": {
      "command": "npx",
      "args": ["-y", "@diagrammo/dgmo-mcp"]
    }
  }
}

Restart Claude Desktop after saving. The tools appear automatically.

Development

pnpm install
pnpm build
pnpm typecheck

To iterate against an unpublished @diagrammo/dgmo checked out in ../dgmo, override the npm-resolved dep with a workspace symlink after install:

pnpm install
pnpm link ../dgmo   # symlink node_modules/@diagrammo/dgmo → ../dgmo
pnpm --filter @diagrammo/dgmo build   # ensure dist/ is up to date

pnpm install will undo the link, so re-run pnpm link ../dgmo if deps change.

Releasing

Releases are tag-driven via .github/workflows/release.yml:

1. Bump the version in all three files (must match exactly — workflow verifies):
   • package.json → version
   • manifest.json → version
   • server.json → version and packages[0].version
2. Commit and tag:

   git commit -am "Release vX.Y.Z"
   git tag vX.Y.Z
   git push && git push --tags
   

3. The workflow runs typecheck + build, publishes to npm with provenance, bundles the .mcpb, publishes to the MCP registry via GitHub OIDC, and attaches the .mcpb to a GitHub release.

Required secrets

• NPM_TOKEN — npm granular access token scoped to @diagrammo/* write. Settings → Secrets and variables → Actions → New repository secret.

MCP registry auth uses GitHub OIDC automatically (no token needed) because the repo is in the diagrammo org and the server namespace is io.github.diagrammo/*.