dunkirk.sh
snatching amp's walkthrough for my own purposes mwhahaha
traverse.dunkirk.sh/diagram/6121f05c-a5ef-4ecf-8ffc-02534c5e767c
feat: use elk and escaoe stuff and update prompt
+35
-43
+22
-32
src/index.ts
+22
-32
src/index.ts
···
59
});
60
61
const nodeMetadataSchema = z.object({
62
-
title: z.string().describe("Display name for the node"),
63
-
description: z
64
-
.string()
65
-
.describe("Detailed markdown explanation of this component"),
66
links: z
67
-
.array(
68
-
z.object({
69
-
label: z.string().describe("Display text, e.g. src/auth.ts"),
70
-
url: z.string().describe("File path or URL"),
71
-
}),
72
-
)
73
-
.optional()
74
-
.describe("Related files or documentation"),
75
-
codeSnippet: z.string().optional().describe("Optional code example"),
76
-
threadID: z
77
-
.string()
78
-
.optional()
79
-
.describe("Optional link to deeper exploration thread"),
80
});
81
82
server.registerTool("walkthrough_diagram", {
83
title: "Walkthrough Diagram",
84
-
description:
85
-
"Render an interactive Mermaid diagram where users can click nodes to see detailed information about each component. Use plain text labels in Mermaid code, no HTML tags or custom styling.",
86
inputSchema: z.object({
87
-
code: z
88
-
.string()
89
-
.describe(
90
-
"Mermaid diagram code. Use plain text labels, no HTML tags. No custom styling/colors.",
91
-
),
92
-
summary: z
93
-
.string()
94
-
.describe("One-sentence summary of what the diagram illustrates"),
95
-
nodes: z
96
-
.record(z.string(), nodeMetadataSchema)
97
-
.describe(
98
-
"Metadata for clickable nodes, keyed by node ID from mermaid code",
99
-
),
100
}),
101
}, async ({ code, summary, nodes }) => {
102
const id = String(++diagramCounter);
···
59
});
60
61
const nodeMetadataSchema = z.object({
62
+
title: z.string(),
63
+
description: z.string(),
64
links: z
65
+
.array(z.object({ label: z.string(), url: z.string() }))
66
+
.optional(),
67
+
codeSnippet: z.string().optional(),
68
});
69
70
server.registerTool("walkthrough_diagram", {
71
title: "Walkthrough Diagram",
72
+
description: `Render an interactive Mermaid diagram where users can click nodes to see details.
73
+
74
+
BEFORE calling this tool, deeply explore the codebase:
75
+
1. Use search/read tools to find key files, entry points, and architecture patterns
76
+
2. Trace execution paths and data flow between components
77
+
3. Read source files — don't guess from filenames
78
+
79
+
Then build the diagram:
80
+
- Use \`flowchart TB\` with plain text labels, no HTML or custom styling
81
+
- 5-12 nodes at the right abstraction level (not too granular, not too high-level)
82
+
- Node keys must match Mermaid node IDs exactly
83
+
- Descriptions: 2-3 paragraphs of markdown per node. Write for someone who has never seen this codebase — explain what the component does, how it works, and why it matters. Use \`code spans\` for identifiers and markdown headers to organize longer explanations
84
+
- Links: include file:line references from your exploration
85
+
- Code snippets: key excerpts (under 15 lines) showing the most important or representative code`,
86
inputSchema: z.object({
87
+
code: z.string(),
88
+
summary: z.string(),
89
+
nodes: z.record(z.string(), nodeMetadataSchema),
90
}),
91
}, async ({ code, summary, nodes }) => {
92
const id = String(++diagramCounter);
+13
-10
src/template.ts
+13
-10
src/template.ts
···
1
import type { WalkthroughDiagram } from "./types.ts";
2
3
export function generateViewerHTML(diagram: WalkthroughDiagram): string {
4
-
const diagramJSON = JSON.stringify(diagram);
5
6
return `<!DOCTYPE html>
7
<html lang="en">
···
258
.diagram-section .node { cursor: pointer; }
259
260
.diagram-section .node:hover :is(rect, circle, ellipse, polygon, path) {
261
-
filter: brightness(1.12) !important;
262
}
263
264
.diagram-section .node.selected :is(rect, circle, ellipse, polygon, path) {
265
-
filter: brightness(1.2) !important;
266
-
stroke: var(--text-muted) !important;
267
-
stroke-width: 1.5px !important;
268
}
269
270
/* Edge hover */
271
.diagram-section .node:hover ~ .edgePath path,
272
.diagram-section .edgePath:hover path {
273
-
stroke-width: 3px;
274
-
filter: brightness(1.2);
275
}
276
277
/* Highlight pulse animation */
···
279
animation: node-highlight-pulse 0.5s ease-in-out 3;
280
}
281
@keyframes node-highlight-pulse {
282
-
0%, 100% { filter: brightness(1); }
283
-
50% { filter: brightness(1.3) drop-shadow(0 0 8px var(--text)); }
284
}
285
286
/* ERD: don't apply hover/selected effects to individual row cells */
···
425
426
<script type="module">
427
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
428
429
const DIAGRAM_DATA = ${diagramJSON};
430
···
440
await mermaid.initialize({
441
startOnLoad: true,
442
theme: "base",
443
-
flowchart: { useMaxWidth: false, htmlLabels: true, curve: "monotoneY", nodeSpacing: 50, rankSpacing: 50 },
444
securityLevel: "loose",
445
});
446
···
1
import type { WalkthroughDiagram } from "./types.ts";
2
3
export function generateViewerHTML(diagram: WalkthroughDiagram): string {
4
+
const diagramJSON = JSON.stringify(diagram).replace(/<\//g, "<\\/");
5
6
return `<!DOCTYPE html>
7
<html lang="en">
···
258
.diagram-section .node { cursor: pointer; }
259
260
.diagram-section .node:hover :is(rect, circle, ellipse, polygon, path) {
261
+
fill: var(--code-bg) !important;
262
+
stroke-width: 2px !important;
263
}
264
265
.diagram-section .node.selected :is(rect, circle, ellipse, polygon, path) {
266
+
fill: var(--code-bg) !important;
267
+
stroke-width: 2.5px !important;
268
}
269
270
/* Edge hover */
271
.diagram-section .node:hover ~ .edgePath path,
272
.diagram-section .edgePath:hover path {
273
+
stroke-width: 2.5px;
274
}
275
276
/* Highlight pulse animation */
···
278
animation: node-highlight-pulse 0.5s ease-in-out 3;
279
}
280
@keyframes node-highlight-pulse {
281
+
0%, 100% { stroke-width: 1px; }
282
+
50% { stroke-width: 3px; }
283
}
284
285
/* ERD: don't apply hover/selected effects to individual row cells */
···
424
425
<script type="module">
426
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
427
+
import elkLayouts from "https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@0/dist/mermaid-layout-elk.esm.min.mjs";
428
+
429
+
mermaid.registerLayoutLoaders(elkLayouts);
430
431
const DIAGRAM_DATA = ${diagramJSON};
432
···
442
await mermaid.initialize({
443
startOnLoad: true,
444
theme: "base",
445
+
layout: "elk",
446
+
flowchart: { useMaxWidth: false, htmlLabels: true, nodeSpacing: 24, rankSpacing: 40 },
447
securityLevel: "loose",
448
});
449