@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.
- package/README.md +1 -1
- package/dist/advanced.d.ts +382 -396
- package/dist/advanced.js +135 -21
- package/dist/auto.js +143 -142
- package/dist/block.js +6 -5
- package/dist/{chart-meta-gUwAzi7N.d.ts → chart-meta-D98NbYDp.d.ts} +1 -1
- package/dist/chart-meta.d.ts +2 -2
- package/dist/chart-meta.js +1 -1
- package/dist/{charts-d3-MN6QCYKU.js → charts-d3-3WMDA5Z5.js} +3 -3
- package/dist/{chunk-OPBZYISB.js → chunk-37EHGTQ2.js} +2204 -2018
- package/dist/{chunk-ZDFIY6WX.js → chunk-3PVUGECM.js} +1 -2
- package/dist/{chunk-6CWNVQPW.js → chunk-4C3BTTOL.js} +2 -2
- package/dist/{chunk-4B5YISOR.js → chunk-536EBUPG.js} +16 -1
- package/dist/{chunk-VHO3YBTB.js → chunk-CVVICCSB.js} +24 -2
- package/dist/{chunk-BSJIPMPG.js → chunk-DHIBVN2D.js} +28 -17
- package/dist/{chunk-MOT3NXB5.js → chunk-FVYHDZ6Q.js} +2 -2
- package/dist/{chunk-S23HOUJS.js → chunk-JU2VMFYC.js} +2 -2
- package/dist/{chunk-5PWIV7ZF.js → chunk-LFAQ4BLZ.js} +2 -2
- package/dist/{chunk-DNSEG6P2.js → chunk-PJDX4IKR.js} +2 -2
- package/dist/{chunk-2WPLOS4Q.js → chunk-USHDV2AF.js} +2 -2
- package/dist/{registry-Ch0Umdi1.d.ts → dgmo-router-Dd5PTjxl.d.ts} +98 -98
- package/dist/{dgmo-router-UVYAJCAF.js → dgmo-router-Z5N6QLIC.js} +2 -2
- package/dist/{dimensions-QCPOPPKE.js → dimensions-ES6O2T4H.js} +4 -4
- package/dist/element.js +144 -143
- package/dist/index.d.ts +21 -10
- package/dist/index.js +10 -20
- package/dist/{renderer-IYMA5W7X.js → renderer-A5GFW2XH.js} +4 -4
- package/dist/{renderer-R6OKKSVR.js → renderer-Q2YHQQSN.js} +4 -4
- package/dist/{resolver-W3WKLWDP.js → resolver-ZLYSMILY.js} +3 -3
- package/dist/{themes-DC6u80yr.d.ts → themes-DiUAG4Bf.d.ts} +37 -2
- package/docs/ai-integration.md +5 -5
- package/package.json +2 -21
- package/.claude/commands/dgmo-codebase-report.md +0 -172
- package/.claude/commands/dgmo-diagram-this.md +0 -60
- package/.claude/commands/dgmo-document-project.md +0 -128
- package/.claude/commands/dgmo.md +0 -313
- package/.cursorrules +0 -587
- package/.github/copilot-instructions.md +0 -597
- package/.windsurfrules +0 -587
- package/SKILL.md +0 -573
- package/dist/auto.d.ts +0 -60
- package/dist/auto.mjs +0 -88466
- package/dist/chunk-6MTWIQVO.js +0 -121
- package/dist/cli.cjs +0 -489
- package/dist/element.d.ts +0 -68
- package/dist/element.mjs +0 -88332
- package/dist/load-data-EHDDZ5ZS.js +0 -8
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import {
|
|
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 './
|
|
3
|
-
import { T as Theme } from './themes-
|
|
4
|
-
export { G as Gazetteer, a as GazetteerEntry,
|
|
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,
|
|
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-
|
|
14
|
+
} from "./chunk-DHIBVN2D.js";
|
|
18
15
|
import {
|
|
19
16
|
renderErrorCard
|
|
20
|
-
} from "./chunk-
|
|
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-
|
|
26
|
-
import "./chunk-
|
|
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-
|
|
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-
|
|
4
|
-
import "./chunk-
|
|
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-
|
|
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-
|
|
76
|
+
//# sourceMappingURL=renderer-A5GFW2XH.js.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import {
|
|
2
2
|
renderMap,
|
|
3
3
|
renderMapForExport
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-USHDV2AF.js";
|
|
5
5
|
import "./chunk-FWVKPEG3.js";
|
|
6
|
-
import "./chunk-
|
|
6
|
+
import "./chunk-37EHGTQ2.js";
|
|
7
7
|
import "./chunk-4QV26TEG.js";
|
|
8
|
-
import "./chunk-
|
|
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-
|
|
27
|
+
//# sourceMappingURL=renderer-Q2YHQQSN.js.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
isSubNationalUsExtent,
|
|
3
3
|
resolveMap
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-PJDX4IKR.js";
|
|
5
5
|
import "./chunk-4QV26TEG.js";
|
|
6
|
-
import "./chunk-
|
|
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-
|
|
14
|
+
//# sourceMappingURL=resolver-ZLYSMILY.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TagGroup,
|
|
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
|
|
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 };
|
package/docs/ai-integration.md
CHANGED
|
@@ -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.
|
|
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
|