@kekonic/diagrams 1.0.0-rc.4
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/LICENSE +21 -0
- package/README.md +92 -0
- package/dist/index.d.mts +173 -0
- package/dist/index.mjs +1642 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +67 -0
- package/theme.css +373 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Kekonic
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# `@kekonic/diagrams`
|
|
2
|
+
|
|
3
|
+
The default KDiagram SDK: semantic text diagrams with measured ELK layout, orthogonal routing,
|
|
4
|
+
crossing treatment, accessible SVG, interactive browser hosts, themes, icons, and diagram stories.
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
pnpm add @kekonic/diagrams
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
KDiagram is ESM. Use the CLI package when you only need files and CI:
|
|
13
|
+
`@kekonic/diagrams-cli`.
|
|
14
|
+
|
|
15
|
+
## Render SVG
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import { KDiagram } from "@kekonic/diagrams";
|
|
19
|
+
|
|
20
|
+
const source = `diagram "Checkout" {
|
|
21
|
+
direction LR
|
|
22
|
+
|
|
23
|
+
group app "Application" {
|
|
24
|
+
api: gateway "API"
|
|
25
|
+
checkout: service "Checkout" { icon: shopping-cart }
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
db: database "Postgres"
|
|
29
|
+
bus: broker "Events"
|
|
30
|
+
|
|
31
|
+
api -> checkout "POST /orders"
|
|
32
|
+
checkout -> db "write"
|
|
33
|
+
checkout => bus "OrderPlaced"
|
|
34
|
+
|
|
35
|
+
animation "Order path" {}
|
|
36
|
+
}`;
|
|
37
|
+
|
|
38
|
+
const result = await KDiagram.renderToSvg(source, {
|
|
39
|
+
theme: "light",
|
|
40
|
+
snapshotTheme: true,
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
if (!result.ok || !result.svg) {
|
|
44
|
+
throw new Error(result.diagnostics.map((item) => item.message).join("\n"));
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
`snapshotTheme: true` makes SVG self-contained for README files, wikis, email, and CI artifacts.
|
|
49
|
+
|
|
50
|
+
## Interactive host
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
const controller = KDiagram.renderToElement(source, container, { theme: "dark" });
|
|
54
|
+
await controller.ready();
|
|
55
|
+
|
|
56
|
+
await controller.update(nextSource);
|
|
57
|
+
controller.animations.play("order-path");
|
|
58
|
+
controller.fit();
|
|
59
|
+
controller.destroy();
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Prefer `@kekonic/diagrams-element` for a framework-agnostic custom element or
|
|
63
|
+
`@kekonic/diagrams-ui` for React.
|
|
64
|
+
|
|
65
|
+
## Primary API
|
|
66
|
+
|
|
67
|
+
- `KDiagram.parse(source)` — AST and diagnostics
|
|
68
|
+
- `KDiagram.compile(source)` — semantic graph and policy hints
|
|
69
|
+
- `await KDiagram.layout(graph, options)` — measured ELK layout and edge paths
|
|
70
|
+
- `KDiagram.route(graph, layout, options)` — label placement and endpoint treatment
|
|
71
|
+
- `KDiagram.format(source)` — normalized source
|
|
72
|
+
- `await KDiagram.renderToSvg(source, options)` — complete static pipeline
|
|
73
|
+
- `KDiagram.renderToElement(source, container, options)` — live host and controller
|
|
74
|
+
- `registerTheme`, `registerIcon`, `registerCollection` — extension points
|
|
75
|
+
|
|
76
|
+
API options override source `layout`, `edges`, `render`, and `presentation` blocks.
|
|
77
|
+
|
|
78
|
+
## Icons
|
|
79
|
+
|
|
80
|
+
Built-in glyphs require no loading. Node uses installed Iconify collections offline; browsers fetch
|
|
81
|
+
only requested icon names. Register a collection or custom loader for CSP-controlled/offline browser
|
|
82
|
+
apps. The complete icon vocabulary remains available without shipping whole collections to every
|
|
83
|
+
browser.
|
|
84
|
+
|
|
85
|
+
## Documentation
|
|
86
|
+
|
|
87
|
+
- [Quickstart](https://diagrams.kekonic.com/start/quick-start/)
|
|
88
|
+
- [Gallery](https://diagrams.kekonic.com/gallery/)
|
|
89
|
+
- [Language](https://diagrams.kekonic.com/reference/language/)
|
|
90
|
+
- [Animations](https://diagrams.kekonic.com/design/stories/)
|
|
91
|
+
- [JavaScript API](https://diagrams.kekonic.com/reference/api/)
|
|
92
|
+
- [Publishing guides](https://diagrams.kekonic.com/publish/)
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import { AnimationController, AnimationListItem, AnimationPlayerState, AutoWalkStep, BUILTIN_KIND_CATALOG, BUILTIN_KIND_LIST, BUILTIN_SHAPE_IDS, CompileResult, CompileResult as CompileResult$1, Diagnostic, Direction, EDGE_OPS, EdgeOperator, GraphModel, GraphModel as GraphModel$1, InteractiveRenderOptions, LayoutOptions, LayoutOptions as LayoutOptions$1, ParseResult, ParseResult as ParseResult$1, PresentationOptions, RenderController, RenderOptions, RenderOptions as RenderOptions$1, RenderResult, RenderResult as RenderResult$1, ResolvedPresentation, RoutingOptions, RoutingOptions as RoutingOptions$1, STATEMENT_KEYWORDS, ThemeMode, animationIdFromName, compile, displayLabelCase, edgeOpsPattern, enumerateAutoPaths, formatLabelText, formatSource, getKindDefaults, inferAutoAnimation, isBuiltinKind, isGeometryKind, isKnownShapeId, kindHasCapability, kindSubtitle, listGeometryKinds, listKindsByCategory, mergeOptions, mergePresentationOptions, normalizeShapeId, parse, planAutoWalk, resolvePresentation, traceDeclarationPath } from "@kekonic/diagrams-core";
|
|
2
|
+
import { DiagramTopology, DiagramTopology as DiagramTopology$1, ELK_LAYOUT_ALGORITHM, ELK_ROUTER_ALGORITHM, LaidOutGroup, LaidOutNode, LayoutEdgePath, LayoutEdgePath as LayoutEdgePath$1, LayoutResult, LayoutResult as LayoutResult$1, MeasuredNode, TextMeasurer, analyzeDiagramTopology, layoutAndRouteWithElk, measureGraph } from "@kekonic/diagrams-layout";
|
|
3
|
+
import { THEME_CSS, getThemeTokens, registerTheme, themeToCss } from "@kekonic/diagrams-theme";
|
|
4
|
+
import { BUILTIN_ICON_ALIASES, collectIconIds, listBuiltinIconIds, listDefaultCollections, normalizeIconId, parseIconId, preloadCollections, preloadIcons, registerCollection, registerCollectionLoader, registerIcon, renderIconById, resolveIcon, setIconifyApiBaseUrl } from "@kekonic/diagrams-icons";
|
|
5
|
+
import { renderSvg } from "@kekonic/diagrams-render-svg";
|
|
6
|
+
import { EdgeLabelPlacement, EdgeLabelPlacement as EdgeLabelPlacement$1, RoutedEdge, RoutedEdge as RoutedEdge$1, RoutingResult, RoutingResult as RoutingResult$1, TreatedEdge, TreatedEdge as TreatedEdge$1, applyCrossingTreatment, attachPointOnPerimeter } from "@kekonic/diagrams-routing";
|
|
7
|
+
import { NodeBoundsModel, NodeTypeDefinition, ShapeGeometry, buildNodeBoundsModel, getNodeTypeDefinition, listRegisteredNodeTypeIds, listRegisteredShapeIds, registerNodeType, registerShape, resolveNodeTypeGeometry, resolveShapeGeometry } from "@kekonic/diagrams-geometry";
|
|
8
|
+
export type * from "@kekonic/diagrams-core";
|
|
9
|
+
|
|
10
|
+
//#region src/pipeline/artifacts.d.ts
|
|
11
|
+
type MeasuredGraph = {
|
|
12
|
+
graph: GraphModel$1;
|
|
13
|
+
measured: MeasuredNode[];
|
|
14
|
+
topology: DiagramTopology$1;
|
|
15
|
+
diagnostics: Diagnostic[];
|
|
16
|
+
};
|
|
17
|
+
type LaidOutGraph = MeasuredGraph & {
|
|
18
|
+
layout: LayoutResult$1;
|
|
19
|
+
};
|
|
20
|
+
type RoutedGraph = LaidOutGraph & {
|
|
21
|
+
routing: RoutingResult$1;
|
|
22
|
+
};
|
|
23
|
+
type FinalizedGraph = RoutedGraph & {
|
|
24
|
+
labels: EdgeLabelPlacement$1[];
|
|
25
|
+
treatedEdges: TreatedEdge$1[];
|
|
26
|
+
};
|
|
27
|
+
//#endregion
|
|
28
|
+
//#region src/pipeline/render.d.ts
|
|
29
|
+
type PipelineRenderResult = Omit<RenderResult$1, "layout" | "routing"> & {
|
|
30
|
+
layout?: LayoutResult$1;
|
|
31
|
+
routing?: RoutingResult$1; /** KDiagram-placed edge label boxes (post-ELK). */
|
|
32
|
+
labels?: EdgeLabelPlacement$1[];
|
|
33
|
+
};
|
|
34
|
+
declare function parseSource(source: string): ParseResult$1;
|
|
35
|
+
declare function compileSource(source: string, diagramIndex?: number): CompileResult$1;
|
|
36
|
+
declare function measureFromGraph(graph: GraphModel$1, direction?: Direction): MeasuredGraph;
|
|
37
|
+
declare function layoutFromGraph(graph: GraphModel$1, layoutOpts?: LayoutOptions$1): Promise<LayoutResult$1>;
|
|
38
|
+
declare function layoutMeasuredGraph(measuredGraph: MeasuredGraph, layoutOpts?: LayoutOptions$1): Promise<LaidOutGraph>;
|
|
39
|
+
type RouteFromLayoutResult = {
|
|
40
|
+
labels: EdgeLabelPlacement$1[];
|
|
41
|
+
treatedEdges: TreatedEdge$1[];
|
|
42
|
+
routing: RoutingResult$1;
|
|
43
|
+
};
|
|
44
|
+
/**
|
|
45
|
+
* Finalize labels + endpoint trim from ELK edge paths on `layout`.
|
|
46
|
+
* Does not re-run layout — ELK already owned routing in `layoutFromGraph` / `layoutMeasuredGraph`.
|
|
47
|
+
*/
|
|
48
|
+
declare function routeFromLayout(graph: GraphModel$1, layout: LayoutResult$1, routingOpts?: RoutingOptions$1): RouteFromLayoutResult;
|
|
49
|
+
declare function routeLaidOutGraph(laidOut: LaidOutGraph, routingOpts?: RoutingOptions$1): RoutedGraph;
|
|
50
|
+
declare function finalizeRoutedGraph(routed: RoutedGraph, routingOpts?: RoutingOptions$1): FinalizedGraph;
|
|
51
|
+
declare function renderPipeline(source: string, options?: RenderOptions$1 & {
|
|
52
|
+
layout?: LayoutOptions$1;
|
|
53
|
+
edges?: RoutingOptions$1;
|
|
54
|
+
}): Promise<PipelineRenderResult>;
|
|
55
|
+
//#endregion
|
|
56
|
+
//#region src/pipeline/finalize-edges.d.ts
|
|
57
|
+
type FinalizeElkEdgesInput = {
|
|
58
|
+
graph: GraphModel$1;
|
|
59
|
+
layout: LayoutResult$1;
|
|
60
|
+
edgePaths: LayoutEdgePath$1[];
|
|
61
|
+
routingOpts: RoutingOptions$1;
|
|
62
|
+
measurer?: TextMeasurer;
|
|
63
|
+
};
|
|
64
|
+
type FinalizeElkEdgesResult = {
|
|
65
|
+
labels: EdgeLabelPlacement$1[];
|
|
66
|
+
treatedEdges: TreatedEdge$1[];
|
|
67
|
+
routingEdges: RoutedEdge$1[];
|
|
68
|
+
};
|
|
69
|
+
/** ELK labels + ERD column snap + marker inset (silhouette attach already ran in layout). */
|
|
70
|
+
declare function finalizeElkEdges(input: FinalizeElkEdgesInput): FinalizeElkEdgesResult;
|
|
71
|
+
//#endregion
|
|
72
|
+
//#region src/capabilities.d.ts
|
|
73
|
+
declare const KDIAGRAM_CAPABILITIES_VERSION: 1;
|
|
74
|
+
type KDiagramCapabilities = {
|
|
75
|
+
version: 1;
|
|
76
|
+
registryScope: "built-in";
|
|
77
|
+
language: {
|
|
78
|
+
version: 1;
|
|
79
|
+
diagramFamilies: readonly ["flow", "state", "sequence"];
|
|
80
|
+
statementKeywords: string[];
|
|
81
|
+
edgeOperators: string[];
|
|
82
|
+
};
|
|
83
|
+
nodes: Array<{
|
|
84
|
+
id: string;
|
|
85
|
+
category: string;
|
|
86
|
+
shape: string;
|
|
87
|
+
subtitle: string;
|
|
88
|
+
capabilities: string[];
|
|
89
|
+
defaultIcon?: string;
|
|
90
|
+
}>;
|
|
91
|
+
shapes: string[];
|
|
92
|
+
icons: {
|
|
93
|
+
builtin: string[];
|
|
94
|
+
collections: string[];
|
|
95
|
+
};
|
|
96
|
+
layout: {
|
|
97
|
+
algorithm: string;
|
|
98
|
+
router: string;
|
|
99
|
+
directions: readonly ["LR", "RL", "TD", "BT"];
|
|
100
|
+
densities: readonly ["compact", "normal", "spacious"];
|
|
101
|
+
groupLayouts: readonly ["compound", "swimlane"];
|
|
102
|
+
regionArrangements: readonly ["stack", "row", "grid"];
|
|
103
|
+
};
|
|
104
|
+
presentation: {
|
|
105
|
+
themes: readonly ["dark", "light"];
|
|
106
|
+
exportFormats: readonly ["svg"];
|
|
107
|
+
themeModes: readonly ["snapshot", "live"];
|
|
108
|
+
};
|
|
109
|
+
qualityChecks: string[];
|
|
110
|
+
};
|
|
111
|
+
/** Deterministic, JSON-safe description of the active built-in KDiagram surface. */
|
|
112
|
+
declare function getCapabilities(): KDiagramCapabilities;
|
|
113
|
+
//#endregion
|
|
114
|
+
//#region src/quality.d.ts
|
|
115
|
+
declare const DEFAULT_TARGET_ASPECT_RATIO: number;
|
|
116
|
+
declare const QUALITY_CHECKS: readonly ["extreme-aspect-ratio", "canvas-spanning-edges", "excessive-edge-crossings", "reverse-layout-flow", "edge-label-pressure"];
|
|
117
|
+
type QualityCheck = (typeof QUALITY_CHECKS)[number];
|
|
118
|
+
type DiagramQualityMetrics = {
|
|
119
|
+
width: number;
|
|
120
|
+
height: number;
|
|
121
|
+
aspectRatio: number;
|
|
122
|
+
targetAspectRatio: number;
|
|
123
|
+
targetAspectRatioDifference: number;
|
|
124
|
+
edgeCrossings: number;
|
|
125
|
+
canvasSpanningEdges: number;
|
|
126
|
+
reverseFlowEdges: number;
|
|
127
|
+
labeledEdges: number;
|
|
128
|
+
};
|
|
129
|
+
type DiagramQualityAnalysis = {
|
|
130
|
+
metrics: DiagramQualityMetrics;
|
|
131
|
+
diagnostics: Diagnostic[];
|
|
132
|
+
};
|
|
133
|
+
/** Measure rendered geometry and return evidence plus actionable, human-readable diagnostics. */
|
|
134
|
+
declare function analyzeDiagramQuality(graph: GraphModel$1, layout: LayoutResult$1, routedEdges: RoutingResult$1["edges"]): DiagramQualityAnalysis;
|
|
135
|
+
//#endregion
|
|
136
|
+
//#region src/animation/player.d.ts
|
|
137
|
+
/**
|
|
138
|
+
* Interactive SVG animation player bound to a mounted KDiagram diagram.
|
|
139
|
+
*/
|
|
140
|
+
declare class AnimationPlayer implements AnimationController {
|
|
141
|
+
#private;
|
|
142
|
+
list(): AnimationListItem[];
|
|
143
|
+
getState(): AnimationPlayerState;
|
|
144
|
+
subscribe(listener: (state: AnimationPlayerState) => void): () => void;
|
|
145
|
+
/** Rebind after SVG replace. Preserves current animation id and time when possible. */
|
|
146
|
+
rebind(svg: SVGSVGElement | null, graph: GraphModel$1 | null): void;
|
|
147
|
+
play(id?: string): void;
|
|
148
|
+
pause(): void;
|
|
149
|
+
stop(): void;
|
|
150
|
+
seek(ms: number): void;
|
|
151
|
+
step(delta: -1 | 1): void;
|
|
152
|
+
setLoop(on: boolean): void;
|
|
153
|
+
setSpeed(rate: number): void;
|
|
154
|
+
destroy(): void;
|
|
155
|
+
}
|
|
156
|
+
//#endregion
|
|
157
|
+
//#region src/index.d.ts
|
|
158
|
+
declare const KDiagram: {
|
|
159
|
+
parse(source: string): ParseResult;
|
|
160
|
+
compile(source: string, _options?: Record<string, never>): CompileResult;
|
|
161
|
+
layout(graph: GraphModel, options?: LayoutOptions): Promise<LayoutResult$1>;
|
|
162
|
+
route(graph: GraphModel, layout: LayoutResult$1, options?: RoutingOptions): RouteFromLayoutResult;
|
|
163
|
+
format(source: string): string;
|
|
164
|
+
ensureFonts(): Promise<void>;
|
|
165
|
+
renderToSvg(source: string, options?: RenderOptions & {
|
|
166
|
+
layout?: LayoutOptions;
|
|
167
|
+
edges?: RoutingOptions;
|
|
168
|
+
}): Promise<RenderResult>;
|
|
169
|
+
renderToElement(source: string, container: HTMLElement, options?: InteractiveRenderOptions): RenderController;
|
|
170
|
+
};
|
|
171
|
+
//#endregion
|
|
172
|
+
export { AnimationPlayer, type AutoWalkStep, BUILTIN_ICON_ALIASES, BUILTIN_KIND_CATALOG, BUILTIN_KIND_LIST, BUILTIN_SHAPE_IDS, type CompileResult, DEFAULT_TARGET_ASPECT_RATIO, type DiagramQualityAnalysis, type DiagramQualityMetrics, type DiagramTopology, EDGE_OPS, ELK_LAYOUT_ALGORITHM, ELK_ROUTER_ALGORITHM, type EdgeLabelPlacement, type EdgeOperator, type FinalizeElkEdgesInput, type FinalizeElkEdgesResult, type FinalizedGraph, type GraphModel, type InteractiveRenderOptions, KDIAGRAM_CAPABILITIES_VERSION, KDiagram, type KDiagramCapabilities, type LaidOutGraph, type LaidOutGroup, type LaidOutNode, type LayoutEdgePath, type LayoutOptions, type LayoutResult, type MeasuredGraph, type NodeBoundsModel, type NodeTypeDefinition, type ParseResult, type PresentationOptions, QUALITY_CHECKS, type QualityCheck, type RenderController, type RenderOptions, type RenderResult, type ResolvedPresentation, type RouteFromLayoutResult, type RoutedEdge, type RoutedGraph, type RoutingOptions, type RoutingResult, STATEMENT_KEYWORDS, type ShapeGeometry, THEME_CSS, type ThemeMode, type TreatedEdge, analyzeDiagramQuality, analyzeDiagramTopology, animationIdFromName, applyCrossingTreatment, attachPointOnPerimeter, buildNodeBoundsModel, collectIconIds, compile, compileSource, displayLabelCase, edgeOpsPattern, enumerateAutoPaths, finalizeElkEdges, finalizeRoutedGraph, formatLabelText, formatSource, getCapabilities, getKindDefaults, getNodeTypeDefinition, getThemeTokens, inferAutoAnimation, isBuiltinKind, isGeometryKind, isKnownShapeId, kindHasCapability, kindSubtitle, layoutAndRouteWithElk, layoutFromGraph, layoutMeasuredGraph, listBuiltinIconIds, listDefaultCollections, listGeometryKinds, listKindsByCategory, listRegisteredNodeTypeIds, listRegisteredShapeIds, measureFromGraph, measureGraph, mergeOptions, mergePresentationOptions, normalizeIconId, normalizeShapeId, parse, parseIconId, parseSource, planAutoWalk, preloadCollections, preloadIcons, registerCollection, registerCollectionLoader, registerIcon, registerNodeType, registerShape, registerTheme, renderIconById, renderPipeline, renderSvg, resolveIcon, resolveNodeTypeGeometry, resolvePresentation, resolveShapeGeometry, routeFromLayout, routeLaidOutGraph, setIconifyApiBaseUrl, themeToCss, traceDeclarationPath };
|
|
173
|
+
//# sourceMappingURL=index.d.mts.map
|