@diagrammo/dgmo 0.8.11 → 0.8.13

package/docs/guide/chart-venn.md

@@ -0,0 +1,81 @@
+# Venn Diagram
+
+```dgmo
+venn Pirate Skill Overlap
+
+Swordsmanship(red) alias sw
+Navigation(blue) alias nav
+Leadership(green) alias lead
+
+sw + nav Sea Raiders
+nav + lead Voyager Captains
+sw + lead Buccaneer Chiefs
+sw + nav + lead Legendary Pirates
+```
+
+## Syntax
+
+```
+venn Chart Title
+
+<name>(<color>) alias <abbrev>
+
+<A> + <B> Label
+<A> + <B> + <C> Label
+```
+
+## Metadata Keys
+
+| Key     | Description                             | Required |
+| ------- | --------------------------------------- | -------- |
+| `chart` | Must be `venn`                          | Yes      |
+| `title` | Chart title displayed above the diagram | No       |
+
+## Sets
+
+Each set is defined as a name with an optional color and alias. 2 or 3 sets are supported.
+
+```
+Swordsmanship(red) alias sw
+Navigation(blue) alias nav
+Leadership(green) alias lead
+```
+
+### Colors
+
+Colors can be specified in parentheses after the name:
+
+```
+Math(blue) alias m
+Science(orange) alias s
+```
+
+Supports named colors: `red`, `orange`, `yellow`, `green`, `blue`, `purple`, `teal`, `cyan`, `gray`.
+
+### Aliases
+
+Use `alias` to define a short name for intersections:
+
+```
+Swordsmanship(red) alias sw
+Navigation(blue) alias nav
+```
+
+The alias (`sw`, `nav`) is used when defining intersections. The full name is shown in the diagram.
+
+## Intersections
+
+Intersection lines use `+` to reference two or three sets by alias, followed by a label:
+
+```
+sw + nav Sea Raiders
+nav + lead Voyager Captains
+sw + nav + lead Legendary Pirates
+```
+
+- The label follows the last set reference (no colon)
+- Set references use the alias, not the full name
+
+## Constraints
+
+- Minimum 2 sets, maximum 3 sets

package/docs/guide/chart-wordcloud.md

@@ -0,0 +1,66 @@
+# Word Cloud
+
+```dgmo
+wordcloud Pirate Skills
+
+swordsmanship 95
+navigation 88
+seamanship 85
+gunnery 80
+leadership 75
+cartography 70
+intimidation 68
+sailing 65
+plundering 60
+knot-tying 55
+lookout 50
+cooking 45
+carpentry 40
+fishing 35
+```
+
+## Syntax
+
+```
+wordcloud Chart Title
+rotate none
+max 50
+size 14 80
+
+Word weight
+```
+
+## Metadata Keys
+
+| Key      | Description                                                         | Required |
+| -------- | ------------------------------------------------------------------- | -------- |
+| `chart`  | Must be `wordcloud`                                                 | Yes      |
+| `title`  | Chart title displayed above the chart                               | No       |
+| `rotate` | Word rotation: `none` (default), `mixed`, or `angled`               | No       |
+| `max`    | Maximum number of words to display (0 = unlimited)                  | No       |
+| `size`   | Min and max font size in pixels, space-separated (default: `14 80`) | No       |
+
+## Data Format
+
+Each data line assigns a weight to a word. Higher weights produce larger text:
+
+```
+swordsmanship 95
+navigation 88
+seamanship 85
+```
+
+## Body Text Mode
+
+You can also paste raw text directly — the word cloud will count word frequencies automatically. Common stop words (a, the, is, etc.) are filtered out.
+
+```dgmo
+wordcloud Gettysburg Address
+
+Four score and seven years ago our fathers brought forth
+on this continent a new nation conceived in Liberty and
+dedicated to the proposition that all men are created equal.
+Now we are engaged in a great civil war testing whether
+that nation or any nation so conceived and so dedicated
+can long endure.
+```

package/docs/guide/colors.md

@@ -0,0 +1,283 @@
+# Colors
+
+Diagrammo uses named colors throughout. There are two ways colors appear in diagrams: **inline annotations** directly on elements, and **tags** that map metadata values to colors across many elements at once.
+
+## Named Colors
+
+Nine color names are available everywhere colors are accepted:
+
+<table>
+<tr><th>Name</th><th>Swatch (Nord)</th></tr>
+<tr><td><code>red</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#bf616a;border-radius:3px;vertical-align:middle"></span></td></tr>
+<tr><td><code>orange</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#d08770;border-radius:3px;vertical-align:middle"></span></td></tr>
+<tr><td><code>yellow</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#ebcb8b;border-radius:3px;vertical-align:middle"></span></td></tr>
+<tr><td><code>green</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#a3be8c;border-radius:3px;vertical-align:middle"></span></td></tr>
+<tr><td><code>blue</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#5e81ac;border-radius:3px;vertical-align:middle"></span></td></tr>
+<tr><td><code>purple</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#b48ead;border-radius:3px;vertical-align:middle"></span></td></tr>
+<tr><td><code>teal</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#8fbcbb;border-radius:3px;vertical-align:middle"></span></td></tr>
+<tr><td><code>cyan</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#88c0d0;border-radius:3px;vertical-align:middle"></span></td></tr>
+<tr><td><code>gray</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#4c566a;border-radius:3px;vertical-align:middle"></span></td></tr>
+</table>
+
+Swatches above use Nord values. The actual color rendered depends on your active color scheme — see [Color Schemes](#color-schemes) below.
+
+---
+
+## Color Schemes
+
+Diagrammo includes ten built-in color schemes. Change yours in **Settings**. The same nine color names resolve to different hex values in each scheme. Swatches show the first six colors (red → purple) for light / dark mode.
+
+<table>
+<tr><th>Scheme</th><th style="text-align:center">Light</th><th style="text-align:center">Dark</th></tr>
+<tr>
+  <td><strong>Bold</strong></td>
+  <td><span style="display:inline-flex;gap:2px;background:#ffffff;padding:4px 6px;border-radius:4px;border:1px solid #cccccc"><span style="display:inline-block;width:14px;height:14px;background:#ff0000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff8000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffcc00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#00cc00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#0000ff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cc00cc;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#000000;padding:4px 6px;border-radius:4px;border:1px solid #333333"><span style="display:inline-block;width:14px;height:14px;background:#ff0000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff8000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffff00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#00ff00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#0066ff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff00ff;border-radius:2px"></span></span></td>
+</tr>
+<tr>
+  <td><strong>Catppuccin</strong></td>
+  <td><span style="display:inline-flex;gap:2px;background:#eff1f5;padding:4px 6px;border-radius:4px;border:1px solid #ccd0da"><span style="display:inline-block;width:14px;height:14px;background:#d20f39;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fe640b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#df8e1d;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#40a02b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#1e66f5;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8839ef;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#1e1e2e;padding:4px 6px;border-radius:4px;border:1px solid #45475a"><span style="display:inline-block;width:14px;height:14px;background:#f38ba8;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fab387;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f9e2af;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a6e3a1;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#89b4fa;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cba6f7;border-radius:2px"></span></span></td>
+</tr>
+<tr>
+  <td><strong>Dracula</strong></td>
+  <td><span style="display:inline-flex;gap:2px;background:#f8f8f2;padding:4px 6px;border-radius:4px;border:1px solid #d8d8d2"><span style="display:inline-block;width:14px;height:14px;background:#ff5555;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffb86c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f1fa8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#50fa7b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6272a4;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#bd93f9;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#282a36;padding:4px 6px;border-radius:4px;border:1px solid #6272a4"><span style="display:inline-block;width:14px;height:14px;background:#ff5555;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffb86c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f1fa8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#50fa7b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6272a4;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#bd93f9;border-radius:2px"></span></span></td>
+</tr>
+<tr>
+  <td><strong>Gruvbox</strong></td>
+  <td><span style="display:inline-flex;gap:2px;background:#fbf1c7;padding:4px 6px;border-radius:4px;border:1px solid #d5c4a1"><span style="display:inline-block;width:14px;height:14px;background:#9d0006;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#af3a03;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b57614;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#79740e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#076678;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8f3f71;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#282828;padding:4px 6px;border-radius:4px;border:1px solid #504945"><span style="display:inline-block;width:14px;height:14px;background:#fb4934;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fe8019;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fabd2f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b8bb26;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#83a598;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d3869b;border-radius:2px"></span></span></td>
+</tr>
+<tr>
+  <td><strong>Monokai</strong></td>
+  <td><span style="display:inline-flex;gap:2px;background:#fafaf8;padding:4px 6px;border-radius:4px;border:1px solid #d4d3cc"><span style="display:inline-block;width:14px;height:14px;background:#f92672;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fd971f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e6db74;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a6e22e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5c7eab;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ae81ff;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#272822;padding:4px 6px;border-radius:4px;border:1px solid #49483e"><span style="display:inline-block;width:14px;height:14px;background:#f92672;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fd971f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e6db74;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a6e22e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5c7eab;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ae81ff;border-radius:2px"></span></span></td>
+</tr>
+<tr>
+  <td><strong>Nord</strong></td>
+  <td><span style="display:inline-flex;gap:2px;background:#eceff4;padding:4px 6px;border-radius:4px;border:1px solid #d8dee9"><span style="display:inline-block;width:14px;height:14px;background:#bf616a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d08770;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ebcb8b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a3be8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5e81ac;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b48ead;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#2e3440;padding:4px 6px;border-radius:4px;border:1px solid #4c566a"><span style="display:inline-block;width:14px;height:14px;background:#bf616a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d08770;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ebcb8b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a3be8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5e81ac;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b48ead;border-radius:2px"></span></span></td>
+</tr>
+<tr>
+  <td><strong>One Dark</strong></td>
+  <td><span style="display:inline-flex;gap:2px;background:#fafafa;padding:4px 6px;border-radius:4px;border:1px solid #d0d0d0"><span style="display:inline-block;width:14px;height:14px;background:#e45649;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c18401;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c18401;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#50a14f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#4078f2;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a626a4;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#282c34;padding:4px 6px;border-radius:4px;border:1px solid #3e4451"><span style="display:inline-block;width:14px;height:14px;background:#e06c75;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d19a66;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e5c07b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#98c379;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#61afef;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c678dd;border-radius:2px"></span></span></td>
+</tr>
+<tr>
+  <td><strong>Rosé Pine</strong></td>
+  <td><span style="display:inline-flex;gap:2px;background:#faf4ed;padding:4px 6px;border-radius:4px;border:1px solid #f2e9e1"><span style="display:inline-block;width:14px;height:14px;background:#b4637a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d7827e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ea9d34;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#286983;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#56949f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#907aa9;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#191724;padding:4px 6px;border-radius:4px;border:1px solid #26233a"><span style="display:inline-block;width:14px;height:14px;background:#eb6f92;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ea9a97;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f6c177;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#3e8fb0;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#9ccfd8;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c4a7e7;border-radius:2px"></span></span></td>
+</tr>
+<tr>
+  <td><strong>Solarized</strong></td>
+  <td><span style="display:inline-flex;gap:2px;background:#fdf6e3;padding:4px 6px;border-radius:4px;border:1px solid #eee8d5"><span style="display:inline-block;width:14px;height:14px;background:#dc322f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cb4b16;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b58900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#859900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#268bd2;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6c71c4;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#002b36;padding:4px 6px;border-radius:4px;border:1px solid #073642"><span style="display:inline-block;width:14px;height:14px;background:#dc322f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cb4b16;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b58900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#859900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#268bd2;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6c71c4;border-radius:2px"></span></span></td>
+</tr>
+<tr>
+  <td><strong>Tokyo Night</strong></td>
+  <td><span style="display:inline-flex;gap:2px;background:#d5d6db;padding:4px 6px;border-radius:4px;border:1px solid #9699a3"><span style="display:inline-block;width:14px;height:14px;background:#f52a65;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b15c00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8c6c3e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#587539;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#2e7de9;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#7847bd;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#1a1b26;padding:4px 6px;border-radius:4px;border:1px solid #3b4261"><span style="display:inline-block;width:14px;height:14px;background:#f7768e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff9e64;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e0af68;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#9ece6a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#7aa2f7;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#bb9af7;border-radius:2px"></span></span></td>
+</tr>
+</table>
+
+---
+
+## Editor vs Export Palette
+
+Your editor palette and your export palette don't have to match. You might prefer a dark scheme like Dracula or Tokyo Night while working — easier on the eyes during long sessions — but switch to a light scheme for exports that will end up in presentations, documentation, or shared links.
+
+Diagrammo lets you set a separate **Export Color Scheme** in **Settings**. When configured, all exports (PNG, SVG, clipboard, share links) use that palette instead of your editor palette. The export theme (light, dark, or transparent background) is also independent and can be set in the **Export** dialog.
+
+If no export palette is set, exports use whatever palette and theme you're currently editing in.
+
+---
+
+## Inline Color Annotations
+
+Place a color name in parentheses directly on an element to color it explicitly.
+
+### Flowchart nodes and edges
+
+Append `(color)` inside the node definition or on an edge label:
+
+```
+flowchart Request Pipeline
+
+(Start(green)) -> [Parse Input] -> <Valid?(blue)>
+  -yes(green)-> [Process(teal)] -> (Success(green))
+  -no(red)-> [Error Handler(red)] -> /Log Error(orange)/ -> (Failure(red))
+```
+
+Every node shape supports inline color — rounds `()`, rectangles `[]`, diamonds `<>`, parallelograms `//`, and more.
+
+### Timeline eras and markers
+
+```
+timeline Project Roadmap
+
+era 2025-01 -> 2025-06 Foundation (blue)
+era 2025-07 -> 2025-12 Growth (green)
+
+marker 2025-03 Beta Launch (orange)
+marker 2025-09 GA Release (purple)
+```
+
+---
+
+## Tags: Color by Metadata
+
+Tags let you define named groups of values, assign a color to each value, then annotate your diagram elements with metadata. When a tag group is active, every element is colored by its matching value — without scattering color names throughout the diagram.
+
+This is the primary way to color sequence diagrams, org charts, infrastructure diagrams, and timelines.
+
+### Declaring a tag group
+
+```
+tag GroupName alias g
+  Value1(blue)
+  Value2(green)
+  Value3(orange) default
+```
+
+- **`alias g`** — a short alias you use when assigning metadata (optional but recommended)
+- **`(color)`** — the color for that value
+- **`default`** — the fallback value applied to elements that have no explicit tag assignment
+
+You can define multiple tag groups in one diagram. Only one group is "active" (coloring the diagram) at a time — the active group is selected in the diagram legend.
+
+### Assigning metadata to elements
+
+Use `| key: Value` after any element to attach metadata:
+
+```
+Gateway | t: Platform
+Redis | c: Caching, t: Platform
+```
+
+Multiple metadata keys are separated by commas. Use the tag alias as the key.
+
+### Sequence diagrams
+
+Tags color participant boxes, self-messages, and message arrows. Use `active-tag` to set which tag group is shown by default.
+
+```
+sequence API Gateway — Infrastructure Concerns
+active-tag Concern
+
+tag Concern alias c
+  Caching(blue)
+  Auth(green)
+  RateLimiting(orange)
+  BusinessLogic(purple) default
+
+tag Team alias t
+  Platform(teal)
+  Product(orange)
+  Security(red)
+
+Mobile is an actor
+Gateway is a gateway | t: Platform
+Redis is a cache | c: Caching, t: Platform
+
+[Backend | t: Product]
+  UserAPI is a service
+  OrderAPI is a service
+  DB is a database
+
+== Authentication ==
+Mobile -POST /orders-> Gateway
+Gateway -verify token-> Gateway | c: Auth
+Gateway -check rate limit-> Redis | c: RateLimiting
+
+== Business Logic ==
+Gateway -POST /orders-> OrderAPI
+OrderAPI -INSERT order-> DB
+OrderAPI -201 Created-> Gateway
+
+== Response ==
+Gateway -cache response-> Redis | c: Caching
+Gateway -201 Created-> Mobile
+```
+
+Elements that share a tag value with the active group are highlighted in that color. Elements with no matching tag are shown in a neutral gray.
+
+### Org charts
+
+Org charts use tag groups to color nodes by any metadata field — location, seniority, status, team, etc. Switch between views using the legend.
+
+```
+org Acme Corp
+
+tag Location
+  NY(blue)
+  LA(yellow)
+  Remote(purple)
+
+tag Status
+  FTE(green)
+  Contractor(orange)
+
+Jane Smith
+  role: CEO
+  location: NY
+  status: FTE
+
+  Alex Chen
+    role: CTO
+    location: LA
+    status: FTE
+
+    [Platform Team]
+      Alice Park
+        role: Senior Engineer
+        location: NY
+        status: FTE
+      Bob Torres
+        role: Junior Engineer
+        location: Remote
+        status: Contractor
+```
+
+### Infrastructure diagrams
+
+```
+infra Production Traffic Flow
+
+tag Team alias t
+  Backend(blue)
+  Platform(teal)
+
+CloudFront | t: Platform
+  -> CloudArmor
+
+CloudArmor | t: Platform
+  -> ALB
+
+ALB | t: Platform
+  -/api-> [API Pods]
+
+[API Pods]
+  APIServer | t: Backend
+    instances: 3
+    latency-ms: 45
+```
+
+### Timeline diagrams
+
+Tags in timelines sort and color swim lanes. Use `sort tag:GroupName` to arrange items by tag value.
+
+```
+timeline Product Roadmap 2025
+
+tag Team alias t
+  Engineering(blue)
+  Design(purple)
+  Product(green)
+
+era 2025-01 -> 2025-06 Phase 1 - Foundation
+
+2025-01->2025-03 Core API Development | t: Engineering
+2025-01->2025-02 Design System v1 | t: Design
+2025-02 Competitor Analysis | t: Product
+```

package/docs/guide/index.md

@@ -0,0 +1,55 @@
+# Welcome to Diagrammo
+
+Diagrammo is a diagram editor for creating charts and diagrams with a simple plain-text syntax. Write a few lines of text — get a polished, theme-aware diagram. Available as a [desktop app](https://diagrammo.app/app) and [online editor](https://online.diagrammo.app).
+
+Learn more at **[diagrammo.app](https://diagrammo.app)**.
+
+## Getting Started
+
+- **Create a new file** using the file tree on the left, or press **Cmd + N**
+- **Write diagram code** in the editor — the preview updates in real time
+- **Export** your diagrams as PNG or SVG
+- **Browse the sidebar** to explore all chart types and features
+
+Every diagram starts with the chart type on the first line, followed by your data and options. For example:
+
+```
+bar Q1 Sales
+
+Jan: 42
+Feb: 58
+Mar: 71
+```
+
+## The Diagrammo Ecosystem
+
+### Desktop App
+
+A native Mac app for authoring `.dgmo` files with a live preview editor, file tree, and export. Download at [diagrammo.app/app](https://diagrammo.app/app).
+
+### Online Editor
+
+The full Diagrammo experience in your browser at [online.diagrammo.app](https://online.diagrammo.app). Your diagrams are stored in your browser's [Origin Private File System (OPFS)](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system) — they persist across sessions, but clearing browser data will remove them.
+
+### CLI Tool
+
+The `dgmo` command-line tool renders `.dgmo` files to PNG or SVG from your terminal. Install it via Homebrew:
+
+```bash
+brew tap diagrammo/dgmo
+brew install dgmo
+```
+
+Or run directly with npx:
+
+```bash
+npx @diagrammo/dgmo diagram.dgmo
+```
+
+### JavaScript / TypeScript Library
+
+The `@diagrammo/dgmo` npm package lets you parse and render diagrams programmatically — useful for generating diagrams in build pipelines, servers, or web apps.
+
+```bash
+npm install @diagrammo/dgmo
+```

package/docs/guide/keyboard-shortcuts.md

@@ -0,0 +1,49 @@
+# Keyboard Shortcuts
+
+## Global
+
+| Shortcut            | Action                    |
+| ------------------- | ------------------------- |
+| **⌘ + ,**           | Open Settings             |
+| **⌘ + 1**           | Toggle file tree          |
+| **⌘ + 2**           | Toggle code editor        |
+| **⌘ + Arrow Left**  | Focus previous panel      |
+| **⌘ + Arrow Right** | Focus next panel          |
+| **⌘ + =**           | Increase font size        |
+| **⌘ + -**           | Decrease font size        |
+| **⌘ + 0**           | Reset font size           |
+| **⌘ + S**           | Save file                 |
+| **⌘ + E**           | Export diagram            |
+| **⌘ + N**           | New file                  |
+| **⌘ + ?**           | Keyboard shortcuts        |
+| **⌘ + Shift + F**   | Focus mode (preview only) |
+| **⌘ + Q**           | Quit                      |
+
+## File Tree
+
+| Shortcut                | Action                     |
+| ----------------------- | -------------------------- |
+| **j** / **Arrow Down**  | Move down                  |
+| **k** / **Arrow Up**    | Move up                    |
+| **l** / **Arrow Right** | Expand folder              |
+| **h** / **Arrow Left**  | Collapse folder            |
+| **Enter** / **Space**   | Open file or toggle folder |
+| **F2**                  | Rename                     |
+| **Delete**              | Delete                     |
+| **⌘ + D**               | Duplicate                  |
+
+## Editor
+
+| Shortcut          | Action   |
+| ----------------- | -------- |
+| **Tab**           | Indent   |
+| **Shift + Tab**   | Unindent |
+| **⌘ + Z**         | Undo     |
+| **⌘ + Shift + Z** | Redo     |
+
+## Dialogs
+
+| Shortcut   | Action  |
+| ---------- | ------- |
+| **Enter**  | Confirm |
+| **Escape** | Cancel  |

package/docs/guide/registry.json

@@ -0,0 +1,51 @@
+{
+  "groups": [
+    { "id": "getting-started", "label": "Getting Started" },
+    { "id": "software", "label": "Software" },
+    { "id": "data", "label": "Data" },
+    { "id": "business", "label": "Business" },
+    { "id": "project", "label": "Project" }
+  ],
+  "pages": [
+    { "slug": "index", "title": "Welcome", "group": "getting-started", "file": "index.md" },
+    { "slug": "keyboard-shortcuts", "title": "Keyboard Shortcuts", "group": "getting-started", "file": "keyboard-shortcuts.md" },
+    { "slug": "colors", "title": "Colors", "group": "getting-started", "file": "colors.md" },
+
+    { "slug": "chart-arc", "title": "Arc Diagram", "group": "software", "file": "chart-arc.md" },
+    { "slug": "chart-boxes-and-lines", "title": "Boxes and Lines", "group": "software", "file": "chart-boxes-and-lines.md" },
+    { "slug": "chart-c4", "title": "C4 Diagram (Beta)", "group": "software", "file": "chart-c4.md" },
+    { "slug": "chart-class", "title": "Class Diagram", "group": "software", "file": "chart-class.md" },
+    { "slug": "chart-er", "title": "Entity Relationship", "group": "software", "file": "chart-er.md" },
+    { "slug": "chart-flowchart", "title": "Flowchart", "group": "software", "file": "chart-flowchart.md" },
+    { "slug": "chart-infra", "title": "Infrastructure", "group": "software", "file": "chart-infra.md" },
+    { "slug": "chart-sequence", "title": "Sequence Diagram", "group": "software", "file": "chart-sequence.md" },
+    { "slug": "chart-sitemap", "title": "Sitemap", "group": "software", "file": "chart-sitemap.md" },
+    { "slug": "chart-state", "title": "State Diagram", "group": "software", "file": "chart-state.md" },
+
+    { "slug": "chart-area", "title": "Area Chart", "group": "data", "file": "chart-area.md" },
+    { "slug": "chart-bar", "title": "Bar Chart", "group": "data", "file": "chart-bar.md" },
+    { "slug": "chart-chord", "title": "Chord Diagram", "group": "data", "file": "chart-chord.md" },
+    { "slug": "chart-doughnut", "title": "Doughnut Chart", "group": "data", "file": "chart-doughnut.md" },
+    { "slug": "chart-function", "title": "Function Plot", "group": "data", "file": "chart-function.md" },
+    { "slug": "chart-heatmap", "title": "Heatmap", "group": "data", "file": "chart-heatmap.md" },
+    { "slug": "chart-line", "title": "Line Chart", "group": "data", "file": "chart-line.md" },
+    { "slug": "chart-multi-line", "title": "Multi-Line Chart", "group": "data", "file": "chart-multi-line.md" },
+    { "slug": "chart-pie", "title": "Pie Chart", "group": "data", "file": "chart-pie.md" },
+    { "slug": "chart-polar-area", "title": "Polar Area Chart", "group": "data", "file": "chart-polar-area.md" },
+    { "slug": "chart-radar", "title": "Radar Chart", "group": "data", "file": "chart-radar.md" },
+    { "slug": "chart-scatter", "title": "Scatter Plot", "group": "data", "file": "chart-scatter.md" },
+    { "slug": "chart-slope", "title": "Slope Chart", "group": "data", "file": "chart-slope.md" },
+    { "slug": "chart-bar-stacked", "title": "Stacked Bar Chart", "group": "data", "file": "chart-bar-stacked.md" },
+
+    { "slug": "chart-funnel", "title": "Funnel Chart", "group": "business", "file": "chart-funnel.md" },
+    { "slug": "chart-org", "title": "Org Chart", "group": "business", "file": "chart-org.md" },
+    { "slug": "chart-quadrant", "title": "Quadrant Chart", "group": "business", "file": "chart-quadrant.md" },
+    { "slug": "chart-sankey", "title": "Sankey Diagram", "group": "business", "file": "chart-sankey.md" },
+    { "slug": "chart-venn", "title": "Venn Diagram (Beta)", "group": "business", "file": "chart-venn.md" },
+    { "slug": "chart-wordcloud", "title": "Word Cloud", "group": "business", "file": "chart-wordcloud.md" },
+
+    { "slug": "chart-gantt", "title": "Gantt Chart", "group": "project", "file": "chart-gantt.md" },
+    { "slug": "chart-kanban", "title": "Kanban Board", "group": "project", "file": "chart-kanban.md" },
+    { "slug": "chart-timeline", "title": "Timeline", "group": "project", "file": "chart-timeline.md" }
+  ]
+}

package/gallery/fixtures/boxes-and-lines.dgmo

@@ -36,14 +36,13 @@ OrderQueue | t: Platform
 
 // --- External ---
 PaymentGateway | t: Backend, description: Stripe integration
-OrderService -charges-> PaymentGateway
 
 // --- Consumer ---
 WebApp | t: Frontend
-WebApp -> API Gateway
+  -> API Gateway
 
 Admin | t: Backend
-Admin -> API Gateway
+  -> API Gateway
 
 // --- Groups ---
 [AWS us-east-1]
@@ -57,8 +56,7 @@ Admin -> API Gateway
     ProductDB
     OrderDB
 
-// --- Group edge ---
+// --- Cross-links (flat form — nodes already declared above) ---
+OrderService -charges-> PaymentGateway
 OrderQueue -> PaymentGateway
-
-// --- Bidirectional ---
 SessionCache <-syncs-> ProductCache | p: Medium