@diagrammo/dgmo 0.8.12 → 0.8.14
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/dist/cli.cjs +115 -719
- package/dist/index.cjs +11 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +9 -6
- package/dist/index.js.map +1 -1
- package/docs/guide/chart-arc.md +71 -0
- package/docs/guide/chart-area.md +73 -0
- package/docs/guide/chart-bar-stacked.md +61 -0
- package/docs/guide/chart-bar.md +62 -0
- package/docs/guide/chart-boxes-and-lines.md +243 -0
- package/docs/guide/chart-c4.md +300 -0
- package/docs/guide/chart-chord.md +43 -0
- package/docs/guide/chart-class.md +204 -0
- package/docs/guide/chart-doughnut.md +38 -0
- package/docs/guide/chart-er.md +218 -0
- package/docs/guide/chart-flowchart.md +102 -0
- package/docs/guide/chart-function.md +56 -0
- package/docs/guide/chart-funnel.md +38 -0
- package/docs/guide/chart-gantt.md +368 -0
- package/docs/guide/chart-heatmap.md +41 -0
- package/docs/guide/chart-infra.md +694 -0
- package/docs/guide/chart-kanban.md +156 -0
- package/docs/guide/chart-line.md +79 -0
- package/docs/guide/chart-multi-line.md +84 -0
- package/docs/guide/chart-org.md +209 -0
- package/docs/guide/chart-pie.md +39 -0
- package/docs/guide/chart-polar-area.md +38 -0
- package/docs/guide/chart-quadrant.md +69 -0
- package/docs/guide/chart-radar.md +38 -0
- package/docs/guide/chart-sankey.md +103 -0
- package/docs/guide/chart-scatter.md +94 -0
- package/docs/guide/chart-sequence.md +332 -0
- package/docs/guide/chart-sitemap.md +248 -0
- package/docs/guide/chart-slope.md +56 -0
- package/docs/guide/chart-state.md +171 -0
- package/docs/guide/chart-timeline.md +229 -0
- package/docs/guide/chart-venn.md +81 -0
- package/docs/guide/chart-wordcloud.md +66 -0
- package/docs/guide/colors.md +283 -0
- package/docs/guide/index.md +55 -0
- package/docs/guide/keyboard-shortcuts.md +49 -0
- package/docs/guide/registry.json +51 -0
- package/gallery/fixtures/boxes-and-lines.dgmo +4 -6
- package/package.json +2 -2
- package/src/sharing.ts +3 -4
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
# Entity Relationship
|
|
2
|
+
|
|
3
|
+
```dgmo
|
|
4
|
+
er Pirate Fleet
|
|
5
|
+
|
|
6
|
+
ships
|
|
7
|
+
id int pk
|
|
8
|
+
name varchar
|
|
9
|
+
ship_type varchar
|
|
10
|
+
cannons int
|
|
11
|
+
1-aboard-* crew_members
|
|
12
|
+
1-1 captains
|
|
13
|
+
1-carries-* treasure
|
|
14
|
+
|
|
15
|
+
captains
|
|
16
|
+
id int pk
|
|
17
|
+
name varchar
|
|
18
|
+
ship_id int fk
|
|
19
|
+
bounty int
|
|
20
|
+
?-frequents-1 ports
|
|
21
|
+
|
|
22
|
+
crew_members
|
|
23
|
+
id int pk
|
|
24
|
+
name varchar
|
|
25
|
+
ship_id int fk
|
|
26
|
+
role varchar nullable
|
|
27
|
+
|
|
28
|
+
treasure
|
|
29
|
+
id int pk
|
|
30
|
+
name varchar
|
|
31
|
+
value int
|
|
32
|
+
ship_id int fk nullable
|
|
33
|
+
|
|
34
|
+
ports
|
|
35
|
+
id int pk
|
|
36
|
+
name varchar
|
|
37
|
+
region varchar unique
|
|
38
|
+
1-docks-* ships
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Overview
|
|
42
|
+
|
|
43
|
+
ER diagrams render database-style entity-relationship boxes with columns, data types, and constraint icons. Tables connect via relationships with crow's foot cardinality markers. Layout is automatic via Dagre.
|
|
44
|
+
|
|
45
|
+
## Syntax
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
er Diagram Title
|
|
49
|
+
notation crowsfoot
|
|
50
|
+
|
|
51
|
+
TableName (color)
|
|
52
|
+
column_name type [constraints]
|
|
53
|
+
|
|
54
|
+
SourceTable 1--* TargetTable : label
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Settings
|
|
58
|
+
|
|
59
|
+
| Key | Description | Default |
|
|
60
|
+
| ---------- | ----------------------- | ----------- |
|
|
61
|
+
| `chart` | Must be `er` | — |
|
|
62
|
+
| `title` | Diagram title | None |
|
|
63
|
+
| `notation` | `crowsfoot` or `labels` | `crowsfoot` |
|
|
64
|
+
|
|
65
|
+
## Tables
|
|
66
|
+
|
|
67
|
+
Declare a table on an unindented line. Columns are indented below:
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
ships
|
|
71
|
+
id int pk
|
|
72
|
+
name varchar
|
|
73
|
+
cannons int
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Colors
|
|
77
|
+
|
|
78
|
+
Colors are auto-assigned from the palette. Override with a color name in parentheses:
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
ships (blue)
|
|
82
|
+
treasure (red)
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Columns
|
|
86
|
+
|
|
87
|
+
Indented lines under a table are parsed as columns.
|
|
88
|
+
|
|
89
|
+
### Format
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
column_name type constraints
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
All parts except the name are optional:
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
id int pk // name + type + constraint
|
|
99
|
+
name varchar // name + type
|
|
100
|
+
active nullable // name + constraint
|
|
101
|
+
notes // name only
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Constraints
|
|
105
|
+
|
|
106
|
+
Add constraints in square brackets. Multiple constraints are comma-separated:
|
|
107
|
+
|
|
108
|
+
| Constraint | Icon | Meaning |
|
|
109
|
+
| ---------- | ---- | ----------- |
|
|
110
|
+
| `pk` | ♦ | Primary key |
|
|
111
|
+
| `fk` | → | Foreign key |
|
|
112
|
+
| `unique` | ◆ | Unique |
|
|
113
|
+
| `nullable` | ○ | Nullable |
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
id int pk
|
|
117
|
+
name varchar unique nullable
|
|
118
|
+
ship_id int fk
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Relationships
|
|
122
|
+
|
|
123
|
+
Relationships connect two tables with cardinality on each side.
|
|
124
|
+
|
|
125
|
+
### Cardinality Values
|
|
126
|
+
|
|
127
|
+
| Symbol | Meaning | Crow's foot |
|
|
128
|
+
| ------ | ----------- | ------------------ |
|
|
129
|
+
| `1` | Exactly one | Perpendicular bar |
|
|
130
|
+
| `*` | Many | Three-pronged fork |
|
|
131
|
+
| `?` | Zero or one | Circle + bar |
|
|
132
|
+
|
|
133
|
+
### Syntax
|
|
134
|
+
|
|
135
|
+
Use `1`, `*`, or `?` with dashes:
|
|
136
|
+
|
|
137
|
+
```
|
|
138
|
+
ships 1--* crew_members
|
|
139
|
+
ports ?--1 captains
|
|
140
|
+
ships 1--* treasure
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
Single dash also works:
|
|
144
|
+
|
|
145
|
+
```
|
|
146
|
+
ships 1-* crew_members
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Labels
|
|
150
|
+
|
|
151
|
+
Add a label after a colon:
|
|
152
|
+
|
|
153
|
+
```
|
|
154
|
+
ships 1--* crew_members : sails on
|
|
155
|
+
ships 1--1 captains : commanded by
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## Notation Modes
|
|
159
|
+
|
|
160
|
+
### Crow's Foot (default)
|
|
161
|
+
|
|
162
|
+
Cardinality is shown as graphical markers at each end of the relationship line:
|
|
163
|
+
|
|
164
|
+
- **One (1):** perpendicular bar
|
|
165
|
+
- **Many (\*):** three-pronged fork
|
|
166
|
+
- **Optional (?):** circle with perpendicular bar
|
|
167
|
+
|
|
168
|
+
### Labels Mode
|
|
169
|
+
|
|
170
|
+
Switch to text labels by adding `notation labels`:
|
|
171
|
+
|
|
172
|
+
```
|
|
173
|
+
er
|
|
174
|
+
notation labels
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
This replaces crow's foot markers with text like `1`, `*`, and `0..1`.
|
|
178
|
+
|
|
179
|
+
## Comments
|
|
180
|
+
|
|
181
|
+
```
|
|
182
|
+
// This line is ignored by the parser
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
## Complete Example
|
|
186
|
+
|
|
187
|
+
```dgmo
|
|
188
|
+
er Pirate Ports
|
|
189
|
+
|
|
190
|
+
ports (blue)
|
|
191
|
+
id int pk
|
|
192
|
+
name varchar
|
|
193
|
+
region varchar unique
|
|
194
|
+
|
|
195
|
+
ships
|
|
196
|
+
id int pk
|
|
197
|
+
name varchar
|
|
198
|
+
home_port int fk
|
|
199
|
+
cannons int
|
|
200
|
+
|
|
201
|
+
captains (green)
|
|
202
|
+
id int pk
|
|
203
|
+
name varchar
|
|
204
|
+
ship_id int fk
|
|
205
|
+
bounty int
|
|
206
|
+
|
|
207
|
+
raids
|
|
208
|
+
id int pk
|
|
209
|
+
ship_id int fk
|
|
210
|
+
port_id int fk
|
|
211
|
+
date date
|
|
212
|
+
plunder int nullable
|
|
213
|
+
|
|
214
|
+
ports 1--* ships : home of
|
|
215
|
+
ships 1--1 captains : commanded by
|
|
216
|
+
ships 1--* raids : launched
|
|
217
|
+
ports 1--* raids : targeted
|
|
218
|
+
```
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# Flowchart
|
|
2
|
+
|
|
3
|
+
```dgmo
|
|
4
|
+
flowchart Pirate's Code
|
|
5
|
+
|
|
6
|
+
(Sail Ho!) -> <Friend or Foe?>
|
|
7
|
+
-friend-> [Check Logs~] -> /Trade Rum/ -> [Celebrate]
|
|
8
|
+
-foe-> [Fire Cannons] -> [[Claim Loot]] -> [Celebrate]
|
|
9
|
+
[Celebrate]->(Sail On)
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Overview
|
|
13
|
+
|
|
14
|
+
Flowcharts use an indent-based syntax with shaped nodes and labeled arrows. Nodes are created automatically from their shape delimiters — just write the flow and Diagrammo handles the layout.
|
|
15
|
+
|
|
16
|
+
## Syntax
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
flowchart Chart Title
|
|
20
|
+
direction-lr
|
|
21
|
+
|
|
22
|
+
(Start) -> [Step] -> <Decision?>
|
|
23
|
+
-yes-> [Action] -> (End)
|
|
24
|
+
-no-> [Other Action]
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Settings
|
|
28
|
+
|
|
29
|
+
| Key | Description | Default |
|
|
30
|
+
| -------------- | ----------------------------------------------- | ------- |
|
|
31
|
+
| `chart` | Must be `flowchart` | Yes |
|
|
32
|
+
| `title` | Diagram title | None |
|
|
33
|
+
| `direction-lr` | Left-to-right layout (default is top-to-bottom) | off |
|
|
34
|
+
|
|
35
|
+
## Node Shapes
|
|
36
|
+
|
|
37
|
+
Each shape has its own delimiter syntax:
|
|
38
|
+
|
|
39
|
+
| Shape | Syntax | Appearance | Typical Use |
|
|
40
|
+
| ---------- | ----------- | ------------------- | ------------------- |
|
|
41
|
+
| Terminal | `(Label)` | Rounded rectangle | Start / End |
|
|
42
|
+
| Process | `[Label]` | Rectangle | Actions / Steps |
|
|
43
|
+
| Decision | `<Label?>` | Diamond | Yes/No branching |
|
|
44
|
+
| I/O | `/Label/` | Parallelogram | Input / Output |
|
|
45
|
+
| Subroutine | `[[Label]]` | Double-bordered box | Reusable procedures |
|
|
46
|
+
| Document | `[Label~]` | Wavy-bottom box | Files / Reports |
|
|
47
|
+
|
|
48
|
+
## Arrows and Edge Labels
|
|
49
|
+
|
|
50
|
+
Connect nodes with `->`. Add labels between dashes:
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
[A] -> [B]
|
|
54
|
+
[A] -yes-> [B]
|
|
55
|
+
[A] -no-> [C]
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Branching with Indentation
|
|
59
|
+
|
|
60
|
+
Indent continuation lines to branch from a decision node:
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
<Valid?>
|
|
64
|
+
-yes-> [Process] -> (Done)
|
|
65
|
+
-no-> [Show Error] -> /Retry/
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
The indented lines connect back to the last node at the parent indent level, creating branching paths without explicit wiring.
|
|
69
|
+
|
|
70
|
+
## Node Colors
|
|
71
|
+
|
|
72
|
+
Add a color name in parentheses at the end of a node label:
|
|
73
|
+
|
|
74
|
+
```
|
|
75
|
+
(Start(green)) -> [Process(blue)] -> (End(red))
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Edge Colors
|
|
79
|
+
|
|
80
|
+
Add a color in parentheses inside the arrow label:
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
<OK?> -yes(green)-> [Continue]
|
|
84
|
+
<OK?> -no(red)-> [Abort]
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Comments
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
// This line is ignored by the parser
|
|
91
|
+
(Start) -> [Step] // inline comments are NOT supported
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Complete Example
|
|
95
|
+
|
|
96
|
+
```dgmo
|
|
97
|
+
flowchart Color Demo
|
|
98
|
+
|
|
99
|
+
(Start(green)) -> [Parse Input] -> <Valid?(blue)>
|
|
100
|
+
-yes(green)-> [Process(teal)] -> (Success(green))
|
|
101
|
+
-no(red)-> [Error Handler(red)] -> /Log Error(orange)/ -> (Failure(red))
|
|
102
|
+
```
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
# Function Plot
|
|
2
|
+
|
|
3
|
+
```dgmo
|
|
4
|
+
function Cannonball Trajectories by Elevation
|
|
5
|
+
x-label Distance (meters)
|
|
6
|
+
y-label Height (meters)
|
|
7
|
+
x 0 to 250
|
|
8
|
+
|
|
9
|
+
15 degrees(blue): -0.001*x^2 + 0.27*x
|
|
10
|
+
30 degrees(green): -0.002*x^2 + 0.58*x
|
|
11
|
+
45 degrees(red): -0.003*x^2 + 0.75*x
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Syntax
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
function Chart Title
|
|
18
|
+
x-label X Axis Label
|
|
19
|
+
y-label Y Axis Label
|
|
20
|
+
x: min to max
|
|
21
|
+
|
|
22
|
+
Label(color): expression
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Metadata Keys
|
|
26
|
+
|
|
27
|
+
| Key | Description | Required |
|
|
28
|
+
| --------- | ------------------------------------- | -------- |
|
|
29
|
+
| `chart` | Must be `function` | Yes |
|
|
30
|
+
| `title` | Chart title displayed above the chart | No |
|
|
31
|
+
| `x-label` | Label for the X axis | No |
|
|
32
|
+
| `y-label` | Label for the Y axis | No |
|
|
33
|
+
| `x` | X range in format `min to max` | No |
|
|
34
|
+
|
|
35
|
+
## Data Format
|
|
36
|
+
|
|
37
|
+
Each data line defines a named function with an optional color and a math expression:
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
Label(color): expression
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Expressions support:
|
|
44
|
+
|
|
45
|
+
- Basic arithmetic: `+`, `-`, `*`, `/`
|
|
46
|
+
- Exponents: `x^2`, `x^3`
|
|
47
|
+
- The variable `x` represents the X axis value
|
|
48
|
+
|
|
49
|
+
## Colors
|
|
50
|
+
|
|
51
|
+
Specify colors in parentheses after the function name:
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
Parabola(blue): x^2
|
|
55
|
+
Linear(red): 2*x + 1
|
|
56
|
+
```
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# Funnel Chart
|
|
2
|
+
|
|
3
|
+
```dgmo
|
|
4
|
+
funnel Pirate Recruitment Pipeline
|
|
5
|
+
|
|
6
|
+
Port Visitors: 1000
|
|
7
|
+
Tavern Recruits: 500
|
|
8
|
+
Crew Trials: 200
|
|
9
|
+
Sworn Pirates: 100
|
|
10
|
+
Veteran Buccaneers: 50
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Syntax
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
funnel Chart Title
|
|
17
|
+
|
|
18
|
+
Label: value
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Metadata Keys
|
|
22
|
+
|
|
23
|
+
| Key | Description | Required |
|
|
24
|
+
| ------- | ------------------------------------- | -------- |
|
|
25
|
+
| `chart` | Must be `funnel` | Yes |
|
|
26
|
+
| `title` | Chart title displayed above the chart | No |
|
|
27
|
+
|
|
28
|
+
## Data Format
|
|
29
|
+
|
|
30
|
+
Each data line defines a stage with its value. Stages are displayed top-to-bottom with widths proportional to their values:
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
Visitors: 1000
|
|
34
|
+
Signups: 500
|
|
35
|
+
Purchases: 100
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
List stages from largest to smallest for a classic funnel shape.
|