@diagrammo/dgmo 0.61.0 → 0.62.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +1 -1
  2. package/dist/advanced.d.ts +382 -396
  3. package/dist/advanced.js +135 -21
  4. package/dist/auto.js +143 -142
  5. package/dist/block.js +6 -5
  6. package/dist/{chart-meta-gUwAzi7N.d.ts → chart-meta-D98NbYDp.d.ts} +1 -1
  7. package/dist/chart-meta.d.ts +2 -2
  8. package/dist/chart-meta.js +1 -1
  9. package/dist/{charts-d3-MN6QCYKU.js → charts-d3-3WMDA5Z5.js} +3 -3
  10. package/dist/{chunk-OPBZYISB.js → chunk-37EHGTQ2.js} +2204 -2018
  11. package/dist/{chunk-ZDFIY6WX.js → chunk-3PVUGECM.js} +1 -2
  12. package/dist/{chunk-6CWNVQPW.js → chunk-4C3BTTOL.js} +2 -2
  13. package/dist/{chunk-4B5YISOR.js → chunk-536EBUPG.js} +16 -1
  14. package/dist/{chunk-VHO3YBTB.js → chunk-CVVICCSB.js} +24 -2
  15. package/dist/{chunk-BSJIPMPG.js → chunk-DHIBVN2D.js} +28 -17
  16. package/dist/{chunk-MOT3NXB5.js → chunk-FVYHDZ6Q.js} +2 -2
  17. package/dist/{chunk-S23HOUJS.js → chunk-JU2VMFYC.js} +2 -2
  18. package/dist/{chunk-5PWIV7ZF.js → chunk-LFAQ4BLZ.js} +2 -2
  19. package/dist/{chunk-DNSEG6P2.js → chunk-PJDX4IKR.js} +2 -2
  20. package/dist/{chunk-2WPLOS4Q.js → chunk-USHDV2AF.js} +2 -2
  21. package/dist/{registry-Ch0Umdi1.d.ts → dgmo-router-Dd5PTjxl.d.ts} +98 -98
  22. package/dist/{dgmo-router-UVYAJCAF.js → dgmo-router-Z5N6QLIC.js} +2 -2
  23. package/dist/{dimensions-QCPOPPKE.js → dimensions-ES6O2T4H.js} +4 -4
  24. package/dist/element.js +144 -143
  25. package/dist/index.d.ts +21 -10
  26. package/dist/index.js +10 -20
  27. package/dist/{renderer-IYMA5W7X.js → renderer-A5GFW2XH.js} +4 -4
  28. package/dist/{renderer-R6OKKSVR.js → renderer-Q2YHQQSN.js} +4 -4
  29. package/dist/{resolver-W3WKLWDP.js → resolver-ZLYSMILY.js} +3 -3
  30. package/dist/{themes-DC6u80yr.d.ts → themes-DiUAG4Bf.d.ts} +37 -2
  31. package/docs/ai-integration.md +5 -5
  32. package/package.json +2 -21
  33. package/.claude/commands/dgmo-codebase-report.md +0 -172
  34. package/.claude/commands/dgmo-diagram-this.md +0 -60
  35. package/.claude/commands/dgmo-document-project.md +0 -128
  36. package/.claude/commands/dgmo.md +0 -313
  37. package/.cursorrules +0 -587
  38. package/.github/copilot-instructions.md +0 -597
  39. package/.windsurfrules +0 -587
  40. package/SKILL.md +0 -573
  41. package/dist/auto.d.ts +0 -60
  42. package/dist/auto.mjs +0 -88466
  43. package/dist/chunk-6MTWIQVO.js +0 -121
  44. package/dist/cli.cjs +0 -489
  45. package/dist/element.d.ts +0 -68
  46. package/dist/element.mjs +0 -88332
  47. package/dist/load-data-EHDDZ5ZS.js +0 -8
package/dist/index.d.ts CHANGED
@@ -1,12 +1,7 @@
1
- import { a as DiagnosticSpec, P as PaletteConfig, C as CompactViewState, D as DgmoError } from './registry-Ch0Umdi1.js';
2
- export { b as ChartTypeId, c as ChartTypeMeta, d as DgmoSeverity, e as DiagnosticParams, E as EmitOptions, f as PaletteColors, g as chartTypes, h as emit, i as formatDgmoError, j as getPalette, r as resolvePaletteOrFallback, p as validate } from './registry-Ch0Umdi1.js';
3
- import { T as Theme } from './themes-DC6u80yr.js';
4
- export { G as Gazetteer, a as GazetteerEntry, M as MapCompletionOptions, b as MapData, c as MapLocationMatch, d as MapPlaceCompletion, e as MapRegionCompletion, R as RegionName, f as RegionNames, g as completeMapPlaces, h as completeMapRegions, p as palettes, s as searchMapLocations, t as themes } from './themes-DC6u80yr.js';
5
-
6
- declare function getMinDimensions(content: string): {
7
- width: number;
8
- height: number;
9
- };
1
+ import { D as DiagnosticSpec, P as PaletteConfig, C as CompactViewState, a as DgmoError } from './dgmo-router-Dd5PTjxl.js';
2
+ export { b as ChartTypeId, c as ChartTypeMeta, d as DgmoSeverity, e as DiagnosticParams, E as EmitOptions, f as PaletteColors, g as chartTypes, h as emit, i as formatDgmoError, j as getPalette, r as resolvePaletteOrFallback, p as validate } from './dgmo-router-Dd5PTjxl.js';
3
+ import { T as Theme, M as MapDataSource } from './themes-DiUAG4Bf.js';
4
+ export { G as Gazetteer, a as GazetteerEntry, b as MapCompletionOptions, c as MapData, d as MapLocationMatch, e as MapPlaceCompletion, f as MapRegionCompletion, R as RegionName, g as RegionNames, h as completeMapPlaces, i as completeMapRegions, p as palettes, s as searchMapLocations, t as themes } from './themes-DiUAG4Bf.js';
10
5
 
11
6
  /**
12
7
  * Make an SVG produced by `@diagrammo/dgmo`'s static `render()` suitable for
@@ -144,7 +139,23 @@ interface RenderOptions {
144
139
  */
145
140
  width?: number;
146
141
  height?: number;
142
+ /**
143
+ * Basemap assets for `map` charts — the data itself, or a loader returning
144
+ * it. `render()` reads nothing from the filesystem or the network on its own,
145
+ * so this is the only way a map obtains a basemap, and its presence here is
146
+ * what tells a caller whether a render can touch the environment.
147
+ *
148
+ * - Node / CLI / SSR: pass the `loadMapData` loader from
149
+ * `@diagrammo/dgmo/advanced`. It runs only when the content really is a
150
+ * map, so a non-map render never pays to read the assets.
151
+ * - Browser / Worker / Obsidian: pass your bundled `MapData`.
152
+ *
153
+ * Omit it and a map renders empty with an `E_MAP_DATA_NOT_SUPPLIED`
154
+ * diagnostic. Every other chart type ignores this option.
155
+ */
156
+ mapData?: MapDataSource;
147
157
  }
158
+
148
159
  interface RenderResult {
149
160
  svg: string;
150
161
  diagnostics: DgmoError[];
@@ -193,4 +204,4 @@ interface DecodedDiagramUrl {
193
204
  */
194
205
  declare function decodeDiagramUrl(url: string): DecodedDiagramUrl | null;
195
206
 
196
- export { CompactViewState, D3_DATA_CHART_TYPES, type DataChartInteractionOpts, type DecodedDiagramUrl, DgmoError, DiagnosticSpec, type EncodeDiagramUrlOptions, type MountD3Opts, type MountedD3Chart, type NormalizeSvgForEmbedOptions, PaletteConfig, type RenderOptions, type RenderResult, Theme, attachDataChartInteractions, decodeDiagramUrl, defaultEmbedBackground, encodeDiagramUrl, getDiagnosticSpec, getEmbedSvgViewBox, getMinDimensions, listDiagnosticCodes, mountD3DataChart, normalizeSvgForEmbed, render, supportsD3DataChart };
207
+ export { CompactViewState, D3_DATA_CHART_TYPES, type DataChartInteractionOpts, type DecodedDiagramUrl, DgmoError, DiagnosticSpec, type EncodeDiagramUrlOptions, MapDataSource, type MountD3Opts, type MountedD3Chart, type NormalizeSvgForEmbedOptions, PaletteConfig, type RenderOptions, type RenderResult, Theme, attachDataChartInteractions, decodeDiagramUrl, defaultEmbedBackground, encodeDiagramUrl, getDiagnosticSpec, getEmbedSvgViewBox, listDiagnosticCodes, mountD3DataChart, normalizeSvgForEmbed, render, supportsD3DataChart };
package/dist/index.js CHANGED
@@ -9,21 +9,21 @@ import {
9
9
  searchMapLocations,
10
10
  themes
11
11
  } from "./chunk-SQAG3UXH.js";
12
- import {
13
- MAP_DIAGNOSTICS
14
- } from "./chunk-4B5YISOR.js";
15
12
  import {
16
13
  render
17
- } from "./chunk-BSJIPMPG.js";
14
+ } from "./chunk-DHIBVN2D.js";
18
15
  import {
19
16
  renderErrorCard
20
- } from "./chunk-5PWIV7ZF.js";
17
+ } from "./chunk-LFAQ4BLZ.js";
18
+ import {
19
+ MAP_DIAGNOSTICS
20
+ } from "./chunk-536EBUPG.js";
21
21
  import {
22
22
  D3_DATA_CHART_TYPES,
23
23
  renderDataChartD3,
24
24
  supportsD3DataChart
25
- } from "./chunk-6CWNVQPW.js";
26
- import "./chunk-VHO3YBTB.js";
25
+ } from "./chunk-4C3BTTOL.js";
26
+ import "./chunk-CVVICCSB.js";
27
27
  import "./chunk-3OLO2MZ6.js";
28
28
  import "./chunk-YRYKTYMQ.js";
29
29
  import "./chunk-YYVTBZZC.js";
@@ -41,9 +41,8 @@ import {
41
41
  encodeDiagramUrl
42
42
  } from "./chunk-U7VO6JAA.js";
43
43
  import {
44
- REGISTRY_BY_ID,
45
44
  parseDgmo
46
- } from "./chunk-ZDFIY6WX.js";
45
+ } from "./chunk-3PVUGECM.js";
47
46
  import "./chunk-2CMM36O7.js";
48
47
  import "./chunk-A2RUBBVT.js";
49
48
  import "./chunk-JWJBWNQL.js";
@@ -144,15 +143,6 @@ import {
144
143
  } from "./chunk-OLMWTJVU.js";
145
144
  import "./chunk-5WRI5ZAA.js";
146
145
 
147
- // src/dimensions.ts
148
- function getMinDimensions(content) {
149
- const { chartType } = parseDgmo(content);
150
- if (!chartType) return { width: 300, height: 200 };
151
- const descriptor = REGISTRY_BY_ID.get(chartType);
152
- const counts = descriptor?.measure?.(content) ?? {};
153
- return descriptor?.minDims?.(counts) ?? { width: 300, height: 200 };
154
- }
155
-
156
146
  // src/charts-d3/interactions.ts
157
147
  var NS = "http://www.w3.org/2000/svg";
158
148
  var STYLE_ID = "dgmo-chart-interactions-style";
@@ -850,7 +840,8 @@ async function render2(text, options) {
850
840
  palette: palette.id,
851
841
  ...options?.viewState !== void 0 && { viewState: options.viewState },
852
842
  ...options?.width !== void 0 && { width: options.width },
853
- ...options?.height !== void 0 && { height: options.height }
843
+ ...options?.height !== void 0 && { height: options.height },
844
+ ...options?.mapData !== void 0 && { mapData: options.mapData }
854
845
  });
855
846
  const errors = result.diagnostics.filter((d) => d.severity === "error");
856
847
  if (errors.length === 0) {
@@ -903,7 +894,6 @@ export {
903
894
  formatDgmoError,
904
895
  getDiagnosticSpec,
905
896
  getEmbedSvgViewBox,
906
- getMinDimensions,
907
897
  getPalette,
908
898
  listDiagnosticCodes,
909
899
  mountD3DataChart,
@@ -1,11 +1,11 @@
1
1
  import {
2
2
  renderLiveLinkCard
3
- } from "./chunk-MOT3NXB5.js";
4
- import "./chunk-5PWIV7ZF.js";
3
+ } from "./chunk-FVYHDZ6Q.js";
4
+ import "./chunk-LFAQ4BLZ.js";
5
5
  import "./chunk-6KFWC4CO.js";
6
6
  import "./chunk-4ASYQ347.js";
7
7
  import "./chunk-U7VO6JAA.js";
8
- import "./chunk-ZDFIY6WX.js";
8
+ import "./chunk-3PVUGECM.js";
9
9
  import "./chunk-2CMM36O7.js";
10
10
  import "./chunk-A2RUBBVT.js";
11
11
  import "./chunk-JWJBWNQL.js";
@@ -73,4 +73,4 @@ import "./chunk-5WRI5ZAA.js";
73
73
  export {
74
74
  renderLiveLinkCard
75
75
  };
76
- //# sourceMappingURL=renderer-IYMA5W7X.js.map
76
+ //# sourceMappingURL=renderer-A5GFW2XH.js.map
@@ -1,11 +1,11 @@
1
1
  import {
2
2
  renderMap,
3
3
  renderMapForExport
4
- } from "./chunk-2WPLOS4Q.js";
4
+ } from "./chunk-USHDV2AF.js";
5
5
  import "./chunk-FWVKPEG3.js";
6
- import "./chunk-OPBZYISB.js";
6
+ import "./chunk-37EHGTQ2.js";
7
7
  import "./chunk-4QV26TEG.js";
8
- import "./chunk-VHO3YBTB.js";
8
+ import "./chunk-CVVICCSB.js";
9
9
  import "./chunk-A4GOY3PE.js";
10
10
  import "./chunk-UKZ7K5GS.js";
11
11
  import "./chunk-ES66QH6J.js";
@@ -24,4 +24,4 @@ export {
24
24
  renderMap,
25
25
  renderMapForExport
26
26
  };
27
- //# sourceMappingURL=renderer-R6OKKSVR.js.map
27
+ //# sourceMappingURL=renderer-Q2YHQQSN.js.map
@@ -1,9 +1,9 @@
1
1
  import {
2
2
  isSubNationalUsExtent,
3
3
  resolveMap
4
- } from "./chunk-DNSEG6P2.js";
4
+ } from "./chunk-PJDX4IKR.js";
5
5
  import "./chunk-4QV26TEG.js";
6
- import "./chunk-4B5YISOR.js";
6
+ import "./chunk-536EBUPG.js";
7
7
  import "./chunk-A2RUBBVT.js";
8
8
  import "./chunk-OLMWTJVU.js";
9
9
  import "./chunk-5WRI5ZAA.js";
@@ -11,4 +11,4 @@ export {
11
11
  isSubNationalUsExtent,
12
12
  resolveMap
13
13
  };
14
- //# sourceMappingURL=resolver-W3WKLWDP.js.map
14
+ //# sourceMappingURL=resolver-ZLYSMILY.js.map
@@ -1,4 +1,4 @@
1
- import { T as TagGroup, D as DgmoError, P as PaletteConfig } from './registry-Ch0Umdi1.js';
1
+ import { T as TagGroup, a as DgmoError, P as PaletteConfig, f as PaletteColors, C as CompactViewState } from './dgmo-router-Dd5PTjxl.js';
2
2
 
3
3
  /** A POI / route-stop position: gazetteer name (+ optional ISO scope) or coords. */
4
4
  type PoiPos = {
@@ -477,6 +477,41 @@ declare const palettes: {
477
477
  readonly tokyoNight: PaletteConfig;
478
478
  };
479
479
 
480
+ /**
481
+ * How a host supplies map basemap assets: the data itself, or a loader that
482
+ * returns it. Declared here (rather than accepting only `MapData`) so a Node
483
+ * host can hand over `loadMapData` without paying to read eleven JSON files on
484
+ * a render that turns out not to be a map — the loader is called only inside
485
+ * the map branch.
486
+ */
487
+ type MapDataSource = MapData | (() => Promise<MapData>);
488
+ /**
489
+ * Renders a D3 chart to an SVG string for export.
490
+ * Creates a detached DOM element, renders into it, extracts the SVG, then cleans up.
491
+ */
492
+ type RenderForExportOptions = {
493
+ c4Level?: 'context' | 'containers' | 'components' | 'deployment';
494
+ c4System?: string;
495
+ c4Container?: string;
496
+ tagGroup?: string;
497
+ exportMode?: boolean;
498
+ mapData?: MapDataSource;
499
+ mapAspect?: number;
500
+ onMapResolverDiagnostics?: (diagnostics: readonly DgmoError[]) => void;
501
+ /**
502
+ * Canvas to draw onto, in px. Defaults to EXPORT_WIDTH x EXPORT_HEIGHT.
503
+ *
504
+ * Every chart used to render onto a fixed 1200x800 sheet, so a caller who
505
+ * fitted the result to a narrow column got its ASPECT too — a one-line goal
506
+ * meter arrived 800px tall with the bar as a sliver in the middle. Callers
507
+ * that know the shape they need can now say so; omitting these keeps the
508
+ * previous canvas exactly.
509
+ */
510
+ width?: number;
511
+ height?: number;
512
+ };
513
+ declare function renderForExport(content: string, theme: 'light' | 'dark' | 'transparent', palette?: PaletteColors, viewState?: CompactViewState, options?: RenderForExportOptions): Promise<string>;
514
+
480
515
  interface MapPlaceCompletion {
481
516
  /** Canonical display name (original casing), e.g. `Portland`. */
482
517
  readonly name: string;
@@ -593,4 +628,4 @@ declare const themes: {
593
628
  readonly transparent: "transparent";
594
629
  };
595
630
 
596
- export { type AirportData as A, type BoundaryTopology as B, type Gazetteer as G, type MapCompletionOptions as M, type ParsedMap as P, type RegionName as R, type Theme as T, type GazetteerEntry as a, type MapData as b, type MapLocationMatch as c, type MapPlaceCompletion as d, type MapRegionCompletion as e, type RegionNames as f, completeMapPlaces as g, completeMapRegions as h, type ResolvedMap as i, type MapLayoutLegend as j, type GeoExtent as k, type MapDirectives as l, type MapEdge as m, type MapPoi as n, type MapRegion as o, palettes as p, type MapRoute as q, type PoiPos as r, searchMapLocations as s, themes as t, type ProjectionFamily as u, type ResolvedEdge as v, type ResolvedPoi as w, type ResolvedRegion as x, type ResolvedRoute as y };
631
+ export { type AirportData as A, type BoundaryTopology as B, renderForExport as C, type Gazetteer as G, type MapDataSource as M, type ParsedMap as P, type RegionName as R, type Theme as T, type GazetteerEntry as a, type MapCompletionOptions as b, type MapData as c, type MapLocationMatch as d, type MapPlaceCompletion as e, type MapRegionCompletion as f, type RegionNames as g, completeMapPlaces as h, completeMapRegions as i, type ResolvedMap as j, type MapLayoutLegend as k, type GeoExtent as l, type MapDirectives as m, type MapEdge as n, type MapPoi as o, palettes as p, type MapRegion as q, type MapRoute as r, searchMapLocations as s, themes as t, type PoiPos as u, type ProjectionFamily as v, type ResolvedEdge as w, type ResolvedPoi as x, type ResolvedRegion as y, type ResolvedRoute as z };
@@ -9,7 +9,7 @@ Use AI coding tools to generate `.dgmo` diagrams. This guide covers Claude Code,
9
9
  Install the `dgmo` CLI, then run one command:
10
10
 
11
11
  ```bash
12
- brew install diagrammo/dgmo/dgmo # or: npm install -g @diagrammo/dgmo
12
+ brew install diagrammo/dgmo/dgmo # or: npm install -g @diagrammo/dgmo-cli
13
13
  dgmo install # auto-detects every AI assistant you have
14
14
  ```
15
15
 
@@ -509,12 +509,12 @@ Cursor and Windsurf speak MCP, so `dgmo install` gives them the full render/shar
509
509
 
510
510
  ```bash
511
511
  # From node_modules (if installed as a dependency)
512
- cp node_modules/@diagrammo/dgmo/.cursorrules .
513
- cp node_modules/@diagrammo/dgmo/.windsurfrules .
514
- mkdir -p .github && cp node_modules/@diagrammo/dgmo/.github/copilot-instructions.md .github/
512
+ cp node_modules/@diagrammo/dgmo-cli/.cursorrules .
513
+ cp node_modules/@diagrammo/dgmo-cli/.windsurfrules .
514
+ mkdir -p .github && cp node_modules/@diagrammo/dgmo-cli/.github/copilot-instructions.md .github/
515
515
 
516
516
  # From global npm install
517
- cp $(npm root -g)/@diagrammo/dgmo/.cursorrules .
517
+ cp $(npm root -g)/@diagrammo/dgmo-cli/.cursorrules .
518
518
  ```
519
519
 
520
520
  Each file contains the generated DGMO AI core (anti-patterns + 43-type index), a condensed syntax reference with examples, rendering commands, and common mistakes to avoid.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@diagrammo/dgmo",
3
- "version": "0.61.0",
3
+ "version": "0.62.0",
4
4
  "description": "DGMO diagram markup language — parser, renderer, and color system",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -12,9 +12,6 @@
12
12
  "engines": {
13
13
  "node": ">=20.6"
14
14
  },
15
- "bin": {
16
- "dgmo": "dist/cli.cjs"
17
- },
18
15
  "main": "./dist/index.js",
19
16
  "module": "./dist/index.js",
20
17
  "types": "./dist/index.d.ts",
@@ -63,14 +60,6 @@
63
60
  "types": "./dist/pert.d.ts",
64
61
  "default": "./dist/pert.js"
65
62
  },
66
- "./auto": {
67
- "types": "./dist/auto.d.ts",
68
- "default": "./dist/auto.mjs"
69
- },
70
- "./element": {
71
- "types": "./dist/element.d.ts",
72
- "default": "./dist/element.mjs"
73
- },
74
63
  "./fonts/*": "./fonts/*",
75
64
  "./block": {
76
65
  "types": "./dist/block.d.ts",
@@ -80,18 +69,12 @@
80
69
  },
81
70
  "files": [
82
71
  "dist/*.js",
83
- "dist/*.mjs",
84
72
  "dist/*.d.ts",
85
73
  "dist/*.css",
86
74
  "dist/map-data/*.json",
87
75
  "fonts",
88
76
  "docs/*.md",
89
- "gallery/fixtures",
90
- ".claude/commands",
91
- ".github/copilot-instructions.md",
92
- ".cursorrules",
93
- ".windsurfrules",
94
- "SKILL.md"
77
+ "gallery/fixtures"
95
78
  ],
96
79
  "sideEffects": [
97
80
  "./src/palettes/*.ts",
@@ -137,12 +120,10 @@
137
120
  "check:size": "pnpm build && node scripts/check-bundle-size.cjs",
138
121
  "check:size:update": "pnpm build && node scripts/check-bundle-size.cjs --update",
139
122
  "check:types": "attw --pack . --ignore-rules no-resolution false-export-default cjs-resolves-to-esm",
140
- "postinstall": "node -e \"console.log('\\n💡 Claude Code user? Run: dgmo install claude-code\\n')\"",
141
123
  "prepare": "husky"
142
124
  },
143
125
  "dependencies": {
144
126
  "@dagrejs/dagre": "^3.0.0",
145
- "@resvg/resvg-js": "^2.6.2",
146
127
  "d3-array": "^3.2.4",
147
128
  "d3-cloud": "^1.2.9",
148
129
  "d3-geo": "^3.1.1",
@@ -1,172 +0,0 @@
1
- # /dgmo-codebase-report — Visual Architecture Report for a Codebase
2
-
3
- You are producing a **single, committable Markdown report** that explains how a codebase works, using embedded DGMO diagrams. The report is a real engineering deliverable — an onboarding / architecture document a new teammate could read top-to-bottom and understand the system. The diagrams are there to do work, not decoration.
4
-
5
- ## Output contract (read this first)
6
-
7
- - **One Markdown file.** Default path `docs/architecture-report.md` (create `docs/` if missing). If the user named a path, use it.
8
- - **Diagrams are embedded as fenced code blocks**, not images:
9
-
10
- ````
11
- ```dgmo
12
- c4 System Context
13
- ...
14
- ```
15
- ````
16
-
17
- Rendering surfaces (diagrammo app, online.diagrammo.app, the remark/astro/docusaurus/fumadocs wrappers, the Obsidian plugin) render these fences live. In a plain viewer (e.g. GitHub) the reader sees the DGMO source, which is still readable. Do **not** inline PNG/SVG — the fence is the source of truth and stays diffable in git.
18
- - **Prose carries the report.** Every diagram is wrapped in explanation: what it shows, why it matters, the non-obvious bits. A diagram with no surrounding analysis is a failure.
19
- - **Everything is real.** Use actual module, file, service, table, and endpoint names pulled from the code. No invented components, no placeholder "ServiceA".
20
-
21
- ## Prerequisites (optional, graceful)
22
-
23
- You can produce the report with **no tools at all** — it is just Markdown. But validate the DGMO if you can:
24
-
25
- - **MCP available?** (you can call `mcp__dgmo__list_chart_types`) → use `mcp__dgmo__get_language_reference(type)`, `mcp__dgmo__get_examples(type)`, and `mcp__dgmo__validate_diagram(dgmo)`.
26
- - **No MCP, `dgmo` CLI installed?** → `dgmo types` lists chart types; validate a fence by writing it to a temp file and running `dgmo /tmp/x.dgmo -o /tmp/x.svg` (it exits non-zero and prints diagnostics on a syntax error).
27
- - **Neither?** → lean on the `dgmo-diagramming` skill for syntax. Still ship the report; tell the user it was not machine-validated and how to install the CLI (`npm i -g @diagrammo/dgmo` or `brew install diagrammo/dgmo/dgmo`).
28
-
29
- Never block the report on tooling. Never `dgmo install` or render images unless the user asks.
30
-
31
- ## Step 1 — Map the codebase
32
-
33
- Read enough to be accurate, not everything. Prioritize:
34
-
35
- 1. **README / docs** — stated purpose, vocabulary, intended architecture.
36
- 2. **Manifest(s)** — `package.json`, `Cargo.toml`, `go.mod`, `pyproject.toml`, `pom.xml`, `*.csproj`, etc. → language, framework, key deps, scripts, workspaces/monorepo layout.
37
- 3. **Source tree** — top-level of `src/` / `app/` / `cmd/` / `lib/` and the package/module boundaries. Identify the real seams (layers, services, domains).
38
- 4. **Entry points** — `main`, server bootstrap, CLI entry, route registration, job/worker registration.
39
- 5. **Data layer** — ORM models, migrations, `schema.sql`, prisma/drizzle/typeorm/ent/sqlalchemy definitions.
40
- 6. **Infra & integrations** — `Dockerfile`, `docker-compose.yml`, `k8s/`, `terraform/`, `.env.example`, queue/cache/3rd-party clients.
41
-
42
- Write down (for your own use): one-sentence purpose, tech stack, the 5–12 top-level components and how they depend on each other, the 1–3 most important runtime flows, the data model, external dependencies.
43
-
44
- ## Step 2 — Choose the diagrams (fit, not formula)
45
-
46
- A good report is 3–7 diagrams that form a **narrative**: zoom from the outside in, then show behavior, then data. Pick from this matrix based on what the code actually has — skip anything that doesn't apply.
47
-
48
- | Signal in the codebase | Chart type | Section it anchors |
49
- |---|---|---|
50
- | Any system with external users/deps | `c4` (context, then container) | "System at a glance" — almost always include one |
51
- | Internal modules/packages with dependencies | `boxes-and-lines` | "Module map" — the dependency graph, grouped by layer/domain via tags |
52
- | REST/GraphQL/RPC handlers, key workflows | `sequence` | "Key flows" — 1–3 important request/event paths |
53
- | DB models / migrations / schema | `er` | "Data model" |
54
- | Docker / k8s / cloud / LB / queues | `infra` | "Infrastructure & traffic" |
55
- | Status fields, workflow/state machines | `state` | "Lifecycle" |
56
- | Class/interface hierarchies that matter | `class` | "Core types" |
57
- | Cross-team / cross-service process | `swimlane` | "End-to-end process" |
58
-
59
- Rules:
60
- - **Always** open with a `c4` context or container view — the high-level orientation.
61
- - **Always** include a `boxes-and-lines` **module/dependency map** for any non-trivial repo — this is the highest-value diagram for understanding code and the main reason this report exists.
62
- - Behavior → `sequence`. Don't ship more than 3 sequences; pick the flows that teach the system.
63
- - `er` only if there's a real schema. `infra` only if there's real infra config. Don't force-fit.
64
- - Small repo (a script, a single-file lib)? 1–2 diagrams is the right answer. Don't pad.
65
-
66
- ## Step 3 — Pull syntax for each type
67
-
68
- For every chart type you'll use, fetch idiomatic syntax before writing it:
69
-
70
- - MCP: `mcp__dgmo__get_language_reference("<type>")` + `mcp__dgmo__get_examples("<type>")`.
71
- - No MCP: consult the `dgmo-diagramming` skill.
72
-
73
- DGMO syntax reminders (common mistakes):
74
- - First line is `type Title` (e.g. `c4 System Context`) — no colon.
75
- - No colons in chart-type declarations, tag declarations, or directives.
76
- - Arrows carry inline labels: `User -POST /login-> API` (sync), `API ~publish~> Queue` (async). Never Mermaid-style `-->`/`->>`.
77
- - Tags color groups: `tag Layer as l` then indented `Frontend blue`. Color is a trailing token, no parens, no hex.
78
- - ER columns are space-separated: `id int pk` (the one carve-out). Infra node props need a colon (`latency-ms: 50`).
79
- - Lean on inference: `User` → actor, `PostgresDB` → database; only declare a type when the name won't infer it.
80
-
81
- ## Step 4 — Write the report
82
-
83
- Build the Markdown around the diagrams. Structure:
84
-
85
- ```markdown
86
- # <Project> — Architecture Report
87
-
88
- > Generated from a codebase walkthrough on <date>. Diagrams are DGMO fences —
89
- > view in the Diagrammo app, online.diagrammo.app, or any DGMO-enabled docs site
90
- > to see them rendered; the raw source is readable as-is.
91
-
92
- ## TL;DR
93
- - **What it is:** <one sentence>
94
- - **Stack:** <language / framework / db / infra>
95
- - **Shape:** <monolith | modular monolith | services | library | CLI> with <N> top-level modules.
96
- - **Read next:** the Module map below is the fastest way in.
97
-
98
- ## System at a glance
99
- <2–4 sentences framing the system and its external dependencies.>
100
-
101
- ```dgmo
102
- c4 System Context
103
- ...
104
- ```
105
- <1–3 sentences reading the diagram: what each actor/system is, the key boundary.>
106
-
107
- ## Module map
108
- <What the internal pieces are and how they depend on each other. Call out the
109
- seams, the direction of dependencies, and anything surprising (cycles, a god
110
- module, a layer that reaches around another).>
111
-
112
- ```dgmo
113
- boxes-and-lines Module Dependencies
114
- tag Layer as l
115
- api blue
116
- domain green
117
- data orange
118
- ...
119
- ```
120
- <Analysis: the layering, the hotspots, where new code tends to go.>
121
-
122
- ## Key flows
123
- <For each important runtime path: a sentence of setup, the sequence, a sentence
124
- on the tricky part (auth, retries, async handoff).>
125
-
126
- ```dgmo
127
- sequence <Flow name>
128
- ...
129
- ```
130
-
131
- ## Data model ← only if there's a real schema
132
- ...
133
-
134
- ## Infrastructure & traffic ← only if there's real infra
135
- ...
136
-
137
- ## Notes & gotchas
138
- <Non-obvious constraints, tech debt, conventions a newcomer must know. Pull these
139
- from comments, config, and naming you noticed while reading.>
140
- ```
141
-
142
- Writing standards:
143
- - Keep each diagram **focused** — 5–9 nodes reads; 25 nodes is a wall. Split or summarize instead of cramming.
144
- - Every section: prose → diagram → reading of the diagram. Never a bare fence.
145
- - Use the codebase's real vocabulary. If the team calls it a "broker," call it a broker.
146
- - Group with tags to encode meaning (layer, domain, team), not just color.
147
-
148
- ## Step 5 — Validate every fence (do not skip)
149
-
150
- Before saving, validate each DGMO fence:
151
- - MCP: `mcp__dgmo__validate_diagram(dgmo)` for each block; fix until clean.
152
- - CLI: write each block to a temp `.dgmo` and run `dgmo <tmp> -o <tmp>.svg`; a non-zero exit means a syntax error — read the diagnostic and fix.
153
-
154
- A report that ships broken DGMO fails its primary job. If you could not validate (no tools), say so explicitly in your summary.
155
-
156
- ## Step 6 — Save and hand off
157
-
158
- Write the file (default `docs/architecture-report.md`). Then report to the user:
159
-
160
- 1. **What was produced** — the path, the section list, how many diagrams and of which types.
161
- 2. **How it's organized** — one line on the narrative arc (context → modules → flows → data).
162
- 3. **How to view it rendered** — open in the Diagrammo app, paste into online.diagrammo.app, or render through a DGMO docs wrapper; raw Markdown shows the source.
163
- 4. **What's next** — which diagram would most benefit from depth, or a flow/section worth adding.
164
-
165
- ## Quality bar / anti-patterns
166
-
167
- - ❌ Generic boxes ("Service", "Module 1") → ✅ real names from the code.
168
- - ❌ One giant everything-diagram → ✅ several focused, layered views.
169
- - ❌ Fences with no prose → ✅ each diagram is explained and "read aloud."
170
- - ❌ Forcing `er`/`infra` with nothing to show → ✅ only diagram what exists.
171
- - ❌ Inlining rendered PNG/SVG → ✅ DGMO fences (diffable, editable, the point of the format).
172
- - ❌ Asking the user which diagrams to make → ✅ decide from the code; they can adjust after.
@@ -1,60 +0,0 @@
1
- # /dgmo-diagram-this — Generate Diagrams from Code
2
-
3
- You are reading the user's code and generating DGMO diagrams that document what it does. Don't ask what kind of diagram — figure it out from the code.
4
-
5
- ## Prerequisites
6
-
7
- Verify DGMO MCP tools are available by calling `mcp__dgmo__list_chart_types`. If not available, tell the user to run `/dgmo` first to set up the MCP server.
8
-
9
- ## Step 1 — Determine Scope
10
-
11
- The user may provide:
12
- - **A file path** — diagram that specific file
13
- - **A function/class name** — diagram that specific piece
14
- - **A directory** — diagram the module/package
15
- - **Nothing** — look at the current working directory and diagram the overall project structure
16
-
17
- If scope is unclear, read the project root (`package.json`, `README.md`, `src/` listing) and pick the most interesting thing to diagram.
18
-
19
- ## Step 2 — Read the Code
20
-
21
- Read the relevant source files. Look for:
22
- - Function signatures and call chains
23
- - API endpoints and request handlers
24
- - Database models, schemas, ORM entities
25
- - State machines, status enums, workflow transitions
26
- - Service-to-service calls, message passing
27
- - Infrastructure config (Docker, k8s, terraform)
28
- - Import graphs and module dependencies
29
-
30
- ## Step 3 — Pick the Diagram Type
31
-
32
- | What you found | Diagram type |
33
- |---|---|
34
- | API handler calling other services/DB | `sequence` |
35
- | Multiple models with relationships | `er` |
36
- | Service/module dependency graph | `c4` (container level) |
37
- | State enum, FSM, workflow transitions | `state` |
38
- | Decision logic, branching control flow | `flowchart` |
39
- | Docker/k8s/cloud infra config | `infra` |
40
- | Class hierarchy with methods | `class` |
41
- | Team/org structure data | `org` |
42
-
43
- If a single file contains multiple diagrammable things (e.g., models AND an API handler), generate multiple diagrams.
44
-
45
- ## Step 4 — Generate
46
-
47
- 1. Call `mcp__dgmo__get_language_reference("<type>")` for syntax.
48
- 2. Call `mcp__dgmo__get_examples("<type>")` for idiomatic patterns.
49
- 3. Write the DGMO using **real names from the code** — actual function names, model names, service names, field types.
50
- 4. Call `mcp__dgmo__validate_diagram(dgmo)` — fix any errors.
51
- 5. Call `mcp__dgmo__preview_diagram([{dgmo, title}])` to show the result.
52
- 6. Save to `<descriptive-name>.dgmo` in the project.
53
-
54
- ## Rules
55
-
56
- - **Use real names** — `UserService`, `orders` table, `POST /api/auth/login` — not generic placeholders
57
- - **Keep it focused** — a sequence diagram with 5-8 messages is better than one with 30. Show the main flow, not every edge case.
58
- - **Lean on inference** — don't declare `PostgresDB is a database` (the name auto-infers). Only use `is a` when the name doesn't match.
59
- - **No colons in directives** — `sequence Auth Flow`, not `chart: sequence`
60
- - **Multiple diagrams are fine** — if the code has both a schema and an API flow, generate both and use `preview_diagram` with multiple entries