@diagrammo/dgmo-mcp 0.1.0

package/README.md

@@ -0,0 +1,95 @@
+# @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 29 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`:
+
+```json
+{
+  "mcpServers": {
+    "dgmo": {
+      "command": "node",
+      "args": ["/path/to/dgmo-mcp/dist/index.js"]
+    }
+  }
+}
+```
+
+Or with npx (after publishing):
+
+```json
+{
+  "mcpServers": {
+    "dgmo": {
+      "command": "npx",
+      "args": ["-y", "@diagrammo/dgmo-mcp"]
+    }
+  }
+}
+```
+
+### Claude Desktop
+
+Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "dgmo": {
+      "command": "node",
+      "args": ["/path/to/dgmo-mcp/dist/index.js"]
+    }
+  }
+}
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm build
+pnpm typecheck
+```

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,665 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/index.ts
+var import_mcp = require("@modelcontextprotocol/sdk/server/mcp.js");
+var import_stdio = require("@modelcontextprotocol/sdk/server/stdio.js");
+var import_zod = require("zod");
+var import_node_child_process2 = require("child_process");
+var import_node_fs = require("fs");
+var import_node_path = require("path");
+var import_node_os2 = require("os");
+var import_node_crypto = require("crypto");
+var import_dgmo = require("@diagrammo/dgmo");
+var import_resvg_js = require("@resvg/resvg-js");
+
+// src/html-report.ts
+function buildCss(palette) {
+  const { light, dark } = palette;
+  return `
+    :root, [data-theme="light"] {
+      --bg: ${light.bg};
+      --surface: ${light.surface};
+      --border: ${light.border};
+      --text: ${light.text};
+      --text-muted: ${light.textMuted};
+      --primary: ${light.primary};
+      --destructive: ${light.destructive};
+    }
+    [data-theme="dark"] {
+      --bg: ${dark.bg};
+      --surface: ${dark.surface};
+      --border: ${dark.border};
+      --text: ${dark.text};
+      --text-muted: ${dark.textMuted};
+      --primary: ${dark.primary};
+      --destructive: ${dark.destructive};
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+    }
+    .container { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
+    h1 { font-size: 1.75rem; margin-bottom: 0.25rem; }
+    h2 { font-size: 1.35rem; margin-top: 2.5rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; }
+    .subtitle { color: var(--text-muted); margin-bottom: 1.5rem; }
+    .diagram-wrapper { margin: 1rem 0; }
+    .diagram-wrapper svg { max-width: 100%; height: auto; display: block; }
+    .description { color: var(--text-muted); margin-bottom: 0.75rem; }
+    details { margin: 0.75rem 0; }
+    summary { cursor: pointer; color: var(--text-muted); font-size: 0.85rem; user-select: none; }
+    summary:hover { color: var(--primary); }
+    pre {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 1rem;
+      overflow-x: auto;
+      font-size: 0.8rem;
+      line-height: 1.5;
+      margin-top: 0.5rem;
+    }
+    code { font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+    .error-placeholder {
+      border: 2px solid var(--destructive);
+      border-radius: 6px;
+      padding: 1rem 1.25rem;
+      color: var(--destructive);
+      margin: 1rem 0;
+    }
+    .toc { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--surface); border-radius: 6px; }
+    .toc h3 { font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+    .toc ol { padding-left: 1.25rem; }
+    .toc li { margin: 0.25rem 0; }
+    .toc a { color: var(--primary); text-decoration: none; }
+    .toc a:hover { text-decoration: underline; }
+    .theme-toggle {
+      position: fixed; top: 1rem; right: 1rem;
+      background: var(--surface); border: 1px solid var(--border);
+      color: var(--text); border-radius: 6px;
+      padding: 0.35rem 0.65rem; cursor: pointer; font-size: 0.8rem;
+      z-index: 100;
+    }
+    .theme-toggle:hover { border-color: var(--primary); }
+    footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.8rem; text-align: center; }
+    @media print {
+      .theme-toggle { display: none; }
+      body { background: white; color: black; }
+      .toc { break-after: page; }
+      h2 { break-after: avoid; }
+      .diagram-wrapper { break-inside: avoid; }
+    }
+  `;
+}
+var THEME_TOGGLE_SCRIPT = `
+<script>
+(function() {
+  var btn = document.querySelector('.theme-toggle');
+  if (!btn) return;
+  btn.addEventListener('click', function() {
+    var html = document.documentElement;
+    var current = html.getAttribute('data-theme') || 'light';
+    var next = current === 'light' ? 'dark' : 'light';
+    html.setAttribute('data-theme', next);
+    btn.textContent = next === 'light' ? '\u263E Dark' : '\u2600 Light';
+  });
+})();
+</script>
+`;
+function slugify(text) {
+  return text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function sourceBlock(dgmoSource) {
+  return `<details><summary>DGMO source</summary><pre><code>${escapeHtml(dgmoSource)}</code></pre></details>`;
+}
+function errorPlaceholder(error) {
+  return `<div class="error-placeholder">\u26A0 Render error: ${escapeHtml(error)}</div>`;
+}
+function buildPreviewHtml(options) {
+  const { svg, title, dgmoSource, palette } = options;
+  const pageTitle = title || "Diagram Preview";
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(pageTitle)}</title>
+<style>${buildCss(palette)}</style>
+</head>
+<body>
+<button class="theme-toggle">\u263E Dark</button>
+<div class="container">
+${title ? `<h1>${escapeHtml(title)}</h1>` : ""}
+<div class="diagram-wrapper">${svg}</div>
+${dgmoSource ? sourceBlock(dgmoSource) : ""}
+</div>
+${THEME_TOGGLE_SCRIPT}
+</body>
+</html>`;
+}
+function buildReportHtml(options) {
+  const { title, subtitle, sections, palette, includeSource } = options;
+  const showToc = sections.length > 3;
+  let toc = "";
+  if (showToc) {
+    const items = sections.map((s, i) => `<li><a href="#section-${i}">${escapeHtml(s.title)}</a></li>`).join("\n");
+    toc = `<nav class="toc"><h3>Contents</h3><ol>${items}</ol></nav>`;
+  }
+  const sectionHtml = sections.map((s, i) => {
+    const anchor = `section-${i}`;
+    const slug = slugify(s.title);
+    const id = showToc ? anchor : slug;
+    const desc = s.description ? `<p class="description">${escapeHtml(s.description)}</p>` : "";
+    const diagram = s.svg ? `<div class="diagram-wrapper">${s.svg}</div>` : errorPlaceholder(s.error || "Unknown render error");
+    const source = includeSource && s.dgmoSource ? sourceBlock(s.dgmoSource) : "";
+    return `<section id="${id}"><h2>${escapeHtml(s.title)}</h2>${desc}${diagram}${source}</section>`;
+  }).join("\n");
+  const now = (/* @__PURE__ */ new Date()).toLocaleString();
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(title)}</title>
+<style>${buildCss(palette)}</style>
+</head>
+<body>
+<button class="theme-toggle">\u263E Dark</button>
+<div class="container">
+<h1>${escapeHtml(title)}</h1>
+${subtitle ? `<p class="subtitle">${escapeHtml(subtitle)}</p>` : ""}
+${toc}
+${sectionHtml}
+<footer>Generated by Diagrammo &middot; ${escapeHtml(now)}</footer>
+</div>
+${THEME_TOGGLE_SCRIPT}
+</body>
+</html>`;
+}
+
+// src/open-browser.ts
+var import_node_child_process = require("child_process");
+var import_node_os = require("os");
+function openInBrowser(filePath) {
+  const os = (0, import_node_os.platform)();
+  const cmd = os === "darwin" ? "open" : os === "win32" ? 'start ""' : "xdg-open";
+  return new Promise((resolve, reject) => {
+    (0, import_node_child_process.exec)(`${cmd} ${JSON.stringify(filePath)}`, (error) => {
+      if (error) reject(error);
+      else resolve();
+    });
+  });
+}
+
+// src/index.ts
+var CHART_TYPE_DESCRIPTIONS = {
+  bar: "Bar chart \u2014 categorical comparisons",
+  line: "Line chart \u2014 trends over time",
+  "multi-line": "Multi-line chart \u2014 multiple series trends",
+  area: "Area chart \u2014 filled line chart",
+  pie: "Pie chart \u2014 part-to-whole proportions",
+  doughnut: "Doughnut chart \u2014 ring-style pie chart",
+  radar: "Radar chart \u2014 multi-dimensional metrics",
+  "polar-area": "Polar area chart \u2014 radial bar chart",
+  "bar-stacked": "Stacked bar chart \u2014 multi-series categorical",
+  scatter: "Scatter plot \u2014 2D data points or bubble chart",
+  sankey: "Sankey diagram \u2014 flow/allocation visualization",
+  chord: "Chord diagram \u2014 circular flow relationships",
+  function: "Function plot \u2014 mathematical expressions",
+  heatmap: "Heatmap \u2014 matrix intensity visualization",
+  funnel: "Funnel chart \u2014 conversion pipeline",
+  slope: "Slope chart \u2014 change between two periods",
+  wordcloud: "Word cloud \u2014 term frequency visualization",
+  arc: "Arc diagram \u2014 network relationships",
+  timeline: "Timeline \u2014 events, eras, and date ranges",
+  venn: "Venn diagram \u2014 set overlaps",
+  quadrant: "Quadrant chart \u2014 2x2 positioning matrix",
+  sequence: "Sequence diagram \u2014 message/interaction flows",
+  flowchart: "Flowchart \u2014 decision trees and process flows",
+  class: "Class diagram \u2014 UML class hierarchies",
+  er: "ER diagram \u2014 database schemas and relationships",
+  org: "Org chart \u2014 hierarchical tree structures",
+  kanban: "Kanban board \u2014 task/workflow columns",
+  c4: "C4 diagram \u2014 system architecture (context, container, component, deployment)",
+  "initiative-status": "Initiative status \u2014 project roadmap with dependency tracking"
+};
+var DEFAULT_FONT_NAME = "Helvetica";
+function svgToPngBase64(svg, background) {
+  const resvg = new import_resvg_js.Resvg(svg, {
+    fitTo: { mode: "zoom", value: 2 },
+    ...background ? { background } : {},
+    font: {
+      loadSystemFonts: true,
+      defaultFontFamily: DEFAULT_FONT_NAME,
+      sansSerifFamily: DEFAULT_FONT_NAME
+    }
+  });
+  const rendered = resvg.render();
+  return Buffer.from(rendered.asPng()).toString("base64");
+}
+function resolveLanguageReference() {
+  try {
+    const dgmoMain = require.resolve("@diagrammo/dgmo");
+    const pkgRoot = (0, import_node_path.dirname)((0, import_node_path.dirname)(dgmoMain));
+    const docsPath = (0, import_node_path.join)(pkgRoot, "docs", "language-reference.md");
+    return (0, import_node_fs.readFileSync)(docsPath, "utf-8");
+  } catch {
+    const workspacePath = (0, import_node_path.join)(__dirname, "..", "..", "dgmo", "docs", "language-reference.md");
+    return (0, import_node_fs.readFileSync)(workspacePath, "utf-8");
+  }
+}
+function extractSection(markdown, chartType) {
+  const escaped = chartType.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const pattern = new RegExp(`^###? ${escaped}\\b.*$`, "im");
+  const match = pattern.exec(markdown);
+  if (!match) return null;
+  const level = match[0].startsWith("### ") ? "### " : "## ";
+  const start = match.index;
+  const rest = markdown.slice(start + match[0].length);
+  const nextHeading = rest.search(new RegExp(`^${level.replace(/ $/, "")}[# ]`, "m"));
+  const end = nextHeading === -1 ? markdown.length : start + match[0].length + nextHeading;
+  return markdown.slice(start, end).trim();
+}
+function writeTempHtml(html, prefix) {
+  const filePath = (0, import_node_path.join)((0, import_node_os2.tmpdir)(), `${prefix}-${(0, import_node_crypto.randomUUID)()}.html`);
+  (0, import_node_fs.writeFileSync)(filePath, html, "utf-8");
+  return filePath;
+}
+async function tryRender(dgmo, theme, palette) {
+  const { diagnostics } = (0, import_dgmo.parseDgmo)(dgmo);
+  const errors = diagnostics.filter((d) => d.severity === "error");
+  if (errors.length > 0) {
+    return { svg: null, error: errors.map(import_dgmo.formatDgmoError).join("\n") };
+  }
+  try {
+    const svg = await (0, import_dgmo.render)(dgmo, { theme, palette, branding: false });
+    if (!svg) return { svg: null, error: "Render returned empty SVG." };
+    return { svg, error: null };
+  } catch (err) {
+    return { svg: null, error: err instanceof Error ? err.message : String(err) };
+  }
+}
+var server = new import_mcp.McpServer({
+  name: "dgmo",
+  version: "0.1.0"
+});
+server.tool(
+  "render_diagram",
+  'Render DGMO markup to SVG or PNG. Returns SVG text or base64 PNG image. IMPORTANT DGMO syntax rules: (1) Parentheses after a label specify color \u2014 "Sales (red)" colors it red, the text becomes just "Sales". Never use parentheses for annotation. Use dashes or separate words instead, e.g. "Diagrammo App - TS" not "Diagrammo App (TS)". (2) All element/label names must be unique \u2014 if parentheses are stripped as color, two labels like "App (TS)" and "App (Rust)" both become "App" causing a duplicate name error.',
+  {
+    dgmo: import_zod.z.string().describe("DGMO diagram markup. Parentheses in labels = color notation (stripped from display name). All labels must be unique after color stripping."),
+    format: import_zod.z.enum(["svg", "png"]).default("svg").describe("Output format"),
+    theme: import_zod.z.enum(["light", "dark", "transparent"]).default("light").describe("Color theme"),
+    palette: import_zod.z.string().default("nord").describe("Color palette (nord, solarized, catppuccin, rose-pine, gruvbox, tokyo-night, one-dark, bold)")
+  },
+  async ({ dgmo, format, theme, palette }) => {
+    const { diagnostics } = (0, import_dgmo.parseDgmo)(dgmo);
+    const errors = diagnostics.filter((d) => d.severity === "error");
+    if (errors.length > 0) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "Diagram has errors:\n" + errors.map(import_dgmo.formatDgmoError).join("\n")
+          }
+        ],
+        isError: true
+      };
+    }
+    const svg = await (0, import_dgmo.render)(dgmo, { theme, palette, branding: false });
+    if (!svg) {
+      return {
+        content: [{ type: "text", text: "Render returned empty SVG." }],
+        isError: true
+      };
+    }
+    if (format === "png") {
+      const paletteColors = (0, import_dgmo.getPalette)(palette);
+      const bg = theme === "transparent" ? void 0 : paletteColors[theme === "dark" ? "dark" : "light"].bg;
+      const base64 = svgToPngBase64(svg, bg);
+      return {
+        content: [{ type: "image", data: base64, mimeType: "image/png" }]
+      };
+    }
+    return {
+      content: [{ type: "text", text: svg }]
+    };
+  }
+);
+server.tool(
+  "share_diagram",
+  "Generate a shareable diagrammo.app URL for a DGMO diagram.",
+  {
+    dgmo: import_zod.z.string().describe("DGMO diagram markup")
+  },
+  async ({ dgmo }) => {
+    const result = (0, import_dgmo.encodeDiagramUrl)(dgmo);
+    if (result.error === "too-large") {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Diagram is too large to share via URL. Compressed size: ${result.compressedSize} bytes (limit: ${result.limit} bytes). Try simplifying the diagram.`
+          }
+        ],
+        isError: true
+      };
+    }
+    return {
+      content: [{ type: "text", text: result.url }]
+    };
+  }
+);
+server.tool(
+  "open_in_app",
+  "Open a DGMO diagram in the Diagrammo desktop app (macOS only). Falls back to browser preview if the app is not installed.",
+  {
+    dgmo: import_zod.z.string().describe("DGMO diagram markup")
+  },
+  async ({ dgmo }) => {
+    const result = (0, import_dgmo.encodeDiagramUrl)(dgmo);
+    if (result.error === "too-large") {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Diagram is too large for URL encoding. Compressed size: ${result.compressedSize} bytes (limit: ${result.limit} bytes).`
+          }
+        ],
+        isError: true
+      };
+    }
+    const url = result.url;
+    const hash = url.split("#")[1] ?? "";
+    const deepLink = `diagrammo://open?dgmo=${hash}`;
+    return new Promise((resolve) => {
+      (0, import_node_child_process2.exec)(`open ${JSON.stringify(deepLink)}`, async (error) => {
+        if (error) {
+          try {
+            const rendered = await tryRender(dgmo, "light", "nord");
+            if (!rendered.svg) {
+              resolve({
+                content: [
+                  {
+                    type: "text",
+                    text: `App not installed and render failed: ${rendered.error}`
+                  }
+                ],
+                isError: true
+              });
+              return;
+            }
+            const paletteConfig = (0, import_dgmo.getPalette)("nord");
+            const html = buildPreviewHtml({
+              svg: rendered.svg,
+              title: "Diagram Preview",
+              dgmoSource: dgmo,
+              palette: paletteConfig
+            });
+            const filePath = writeTempHtml(html, "dgmo-preview");
+            await openInBrowser(filePath);
+            resolve({
+              content: [
+                {
+                  type: "text",
+                  text: `Diagrammo app not found \u2014 opened preview in browser: ${filePath}`
+                }
+              ]
+            });
+          } catch (fallbackErr) {
+            resolve({
+              content: [
+                {
+                  type: "text",
+                  text: `Failed to open Diagrammo app and browser fallback failed: ${fallbackErr instanceof Error ? fallbackErr.message : String(fallbackErr)}`
+                }
+              ],
+              isError: true
+            });
+          }
+        } else {
+          resolve({
+            content: [
+              {
+                type: "text",
+                text: "Opened diagram in Diagrammo app."
+              }
+            ]
+          });
+        }
+      });
+    });
+  }
+);
+server.tool(
+  "list_chart_types",
+  "List all supported DGMO chart types with descriptions.",
+  {},
+  async () => {
+    const types = Object.keys(import_dgmo.DGMO_CHART_TYPE_MAP);
+    const lines = types.map((id) => {
+      const desc = CHART_TYPE_DESCRIPTIONS[id];
+      return desc ? `- ${id}: ${desc}` : `- ${id}`;
+    });
+    return {
+      content: [
+        {
+          type: "text",
+          text: `Supported chart types (${types.length}):
+
+${lines.join("\n")}`
+        }
+      ]
+    };
+  }
+);
+server.tool(
+  "get_language_reference",
+  "Get the DGMO language reference documentation. Optionally filter by chart type.",
+  {
+    chart_type: import_zod.z.string().optional().describe('Optional chart type to get reference for (e.g. "sequence", "flowchart", "bar")')
+  },
+  async ({ chart_type }) => {
+    let content;
+    try {
+      content = resolveLanguageReference();
+    } catch {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "Could not find language-reference.md. Is @diagrammo/dgmo installed?"
+          }
+        ],
+        isError: true
+      };
+    }
+    if (chart_type) {
+      const section = extractSection(content, chart_type);
+      if (!section) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `No section found for chart type "${chart_type}". Use list_chart_types to see available types.`
+            }
+          ],
+          isError: true
+        };
+      }
+      return { content: [{ type: "text", text: section }] };
+    }
+    return { content: [{ type: "text", text: content }] };
+  }
+);
+server.tool(
+  "preview_diagram",
+  'Render one or more DGMO diagrams and open an HTML preview in the browser. Supports theme toggle and optional source display. IMPORTANT: Parentheses in DGMO labels = color notation (stripped from name). All labels must be unique. Use dashes for qualifiers, e.g. "App - TS" not "App (TS)".',
+  {
+    diagrams: import_zod.z.array(
+      import_zod.z.object({
+        title: import_zod.z.string().optional().describe("Optional title for this diagram"),
+        dgmo: import_zod.z.string().describe("DGMO diagram markup. Parentheses in labels = color notation. All labels must be unique.")
+      })
+    ).min(1).describe("One or more diagrams to preview"),
+    theme: import_zod.z.enum(["light", "dark"]).default("light").describe("Color theme"),
+    palette: import_zod.z.string().default("nord").describe("Color palette"),
+    include_source: import_zod.z.boolean().default(false).describe("Show DGMO source in collapsible blocks")
+  },
+  async ({ diagrams, theme, palette, include_source }) => {
+    const paletteConfig = (0, import_dgmo.getPalette)(palette);
+    const results = await Promise.all(
+      diagrams.map(async (d) => {
+        const { svg, error } = await tryRender(d.dgmo, theme, palette);
+        return { title: d.title, dgmo: d.dgmo, svg, error };
+      })
+    );
+    const successes = results.filter((r) => r.svg);
+    const failures = results.filter((r) => !r.svg);
+    if (successes.length === 0) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "All diagrams failed to render:\n" + failures.map((f) => `- ${f.title || "untitled"}: ${f.error}`).join("\n")
+          }
+        ],
+        isError: true
+      };
+    }
+    let html;
+    if (diagrams.length === 1 && successes.length === 1) {
+      const r = results[0];
+      html = buildPreviewHtml({
+        svg: r.svg,
+        title: r.title,
+        dgmoSource: include_source ? r.dgmo : void 0,
+        palette: paletteConfig
+      });
+    } else {
+      const sections = results.map((r) => ({
+        title: r.title || "Untitled",
+        svg: r.svg,
+        dgmoSource: r.dgmo,
+        error: r.error ?? void 0
+      }));
+      html = buildReportHtml({
+        title: "Diagram Preview",
+        sections,
+        palette: paletteConfig,
+        includeSource: include_source
+      });
+    }
+    const filePath = writeTempHtml(html, "dgmo-preview");
+    await openInBrowser(filePath);
+    let message = `Opened preview in browser: ${filePath}`;
+    if (failures.length > 0) {
+      message += "\n\nWarning \u2014 some diagrams failed to render:\n" + failures.map((f) => `- ${f.title || "untitled"}: ${f.error}`).join("\n");
+    }
+    return {
+      content: [{ type: "text", text: message }]
+    };
+  }
+);
+server.tool(
+  "generate_report",
+  'Generate a polished HTML report with multiple DGMO diagrams, table of contents, and optional source blocks. Opens in browser by default. IMPORTANT: Parentheses in DGMO labels = color notation (stripped from name). All labels must be unique. Use dashes for qualifiers, e.g. "App - TS" not "App (TS)".',
+  {
+    title: import_zod.z.string().describe("Report title"),
+    subtitle: import_zod.z.string().optional().describe("Optional subtitle"),
+    sections: import_zod.z.array(
+      import_zod.z.object({
+        title: import_zod.z.string().describe("Section title"),
+        description: import_zod.z.string().optional().describe("Optional section description"),
+        dgmo: import_zod.z.string().describe("DGMO diagram markup. Parentheses in labels = color notation. All labels must be unique.")
+      })
+    ).min(1).describe("Report sections, each with a diagram"),
+    theme: import_zod.z.enum(["light", "dark"]).default("light").describe("Color theme"),
+    palette: import_zod.z.string().default("nord").describe("Color palette"),
+    include_source: import_zod.z.boolean().default(false).describe("Show DGMO source in collapsible blocks"),
+    open: import_zod.z.boolean().default(true).describe("Open the report in the browser")
+  },
+  async ({ title, subtitle, sections: inputSections, theme, palette, include_source, open }) => {
+    const paletteConfig = (0, import_dgmo.getPalette)(palette);
+    const results = await Promise.all(
+      inputSections.map(async (s) => {
+        const { svg, error } = await tryRender(s.dgmo, theme, palette);
+        return { ...s, svg, error };
+      })
+    );
+    const successes = results.filter((r) => r.svg);
+    const failures = results.filter((r) => !r.svg);
+    if (successes.length === 0) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "All sections failed to render:\n" + failures.map((f) => `- ${f.title}: ${f.error}`).join("\n")
+          }
+        ],
+        isError: true
+      };
+    }
+    const sections = results.map((r) => ({
+      title: r.title,
+      description: r.description,
+      svg: r.svg,
+      dgmoSource: r.dgmo,
+      error: r.error ?? void 0
+    }));
+    const html = buildReportHtml({
+      title,
+      subtitle,
+      sections,
+      palette: paletteConfig,
+      includeSource: include_source
+    });
+    const filePath = writeTempHtml(html, "dgmo-report");
+    if (open) {
+      await openInBrowser(filePath);
+    }
+    let message = open ? `Opened report in browser: ${filePath}` : `Report saved to: ${filePath}`;
+    if (failures.length > 0) {
+      message += "\n\nWarning \u2014 some sections failed to render:\n" + failures.map((f) => `- ${f.title}: ${f.error}`).join("\n");
+    }
+    return {
+      content: [{ type: "text", text: message }]
+    };
+  }
+);
+async function main() {
+  const transport = new import_stdio.StdioServerTransport();
+  await server.connect(transport);
+}
+main().catch((err) => {
+  console.error("Failed to start dgmo MCP server:", err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@diagrammo/dgmo-mcp",
+  "version": "0.1.0",
+  "description": "MCP server for rendering DGMO diagrams — SVG/PNG output, browser preview, HTML reports, and 29 chart types. Works with Claude Desktop, Claude Code, and any MCP client.",
+  "keywords": [
+    "mcp",
+    "mcp-server",
+    "diagrams",
+    "svg",
+    "charts",
+    "sequence-diagram",
+    "flowchart",
+    "diagrammo",
+    "dgmo",
+    "claude",
+    "ai"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/diagrammo/dgmo-mcp.git"
+  },
+  "homepage": "https://diagrammo.app/mcp",
+  "bin": {
+    "dgmo-mcp": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs --dts",
+    "dev": "tsup src/index.ts --format cjs --dts --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@diagrammo/dgmo": "^0.2.27",
+    "@modelcontextprotocol/sdk": "^1.12.1",
+    "@resvg/resvg-js": "^2.6.2",
+    "zod": "^3.24.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT"
+}