@diagrammo/dgmo 0.10.1 → 0.10.2

package/docs/guide/how-dgmo-thinks.md

@@ -1,277 +0,0 @@
-# How DGMO Thinks
-
-A guide to the design principles behind the DGMO language. Understanding these themes will help you write diagrams faster and make better use of the language's features.
-
----
-
-## Indent, Don't Repeat
-
-The most important pattern in DGMO: write the thing once, then indent what belongs to it beneath.
-
-Instead of repeating the source on every line:
-
-```dgmo-source
-// Verbose — repeats "API" three times
-API -routes-> UserService
-API -routes-> ProductService
-API -auth-> AuthService
-```
-
-Indent edges under their source:
-
-```dgmo-source
-// Concise — declare once, indent connections
-API
-  -routes-> UserService
-  -routes-> ProductService
-  -auth-> AuthService
-```
-
-This isn't just a shorthand — it's how DGMO thinks about ownership and hierarchy. The pattern shows up everywhere:
-
-- **Org charts and sitemaps** — indentation *is* the hierarchy
-- **Kanban** — cards indented under columns
-- **Gantt** — dependencies indented under tasks
-- **ER** — columns and relationships indented under tables
-- **Sequence** — participants indented under groups
-
-When you see indentation in DGMO, read it as "belongs to."
-
----
-
-## Meaning First, Color Second
-
-When you want to make something red, your instinct might be to reach for a color suffix: `AuthService(red)`. That works for one-offs. But DGMO encourages a different approach for anything that carries meaning.
-
-**Tags** let you separate *what something means* from *how it looks*:
-
-```dgmo-source
-tag Priority alias p
-  Critical(red)
-  Normal(green)
-  Low(gray)
-
-API | p: Critical
-Cache | p: Low
-```
-
-Why go through this indirection?
-
-- **Colors become meaningful.** Red means "Critical," not just red. The legend self-documents.
-- **Palettes stay intact.** Switching from Nord to Dracula adjusts all your colors harmoniously. Direct hex codes would break this.
-- **Filtering works.** Tags are structured metadata — you can sort, hide, and group by them.
-- **One change updates everything.** Rename "Critical" to "Urgent" in one place, not fifty nodes.
-
-Use color suffixes `(red)` for quick visual accents. Use tags when color carries meaning you'd want in a legend.
-
----
-
-## Name Things, Skip the Boilerplate
-
-DGMO infers as much as it can from names you're already writing.
-
-In sequence diagrams, the parser recognizes common names and gives them the right shape automatically:
-
-```dgmo-source
-Redis                // cache (cylinder, dashed)
-UserService          // service (rounded rectangle)
-Kafka                // queue (horizontal cylinder)
-User                 // actor (stick figure)
-WebApp               // frontend (monitor)
-```
-
-You only need `is a` when the name doesn't match a pattern:
-
-```dgmo-source
-Payments is a service       // "Payments" alone wouldn't infer
-Vault is a database         // "Vault" would infer as service
-```
-
-In flowcharts, arrow labels infer color:
-
-```dgmo-source
-<Valid?>
-  -yes-> [Process]          // automatically green
-  -no-> [Show Error]        // automatically red
-```
-
-The first declared tag group auto-activates. Chart types are detected from the first line. Org hierarchy comes from indentation alone.
-
-The principle: **name things sensibly and DGMO figures out the rest.** Override only when inference gets it wrong.
-
----
-
-## Palette-Aware Colors
-
-When you write `(red)`, DGMO doesn't render `#ff0000`. It renders *the red from your active palette* — a shade that harmonizes with the other nine named colors in that palette.
-
-The allowed color names are: `red`, `orange`, `yellow`, `green`, `blue`, `purple`, `teal`, `cyan`, `gray`, `black`, `white`.
-
-That's the complete list. No hex codes, no CSS keywords, no custom colors. This is a deliberate constraint:
-
-- Every palette (Nord, Dracula, Catppuccin, Gruvbox, etc.) defines its own version of these eleven names
-- Switching palettes recolors your entire diagram coherently
-- Diagrams always look good regardless of which palette or theme is active
-- No one accidentally picks colors that clash or become invisible on certain backgrounds
-
-DGMO prioritizes *beautiful by default* over *total control.*
-
----
-
-## Brackets Mean "Container"
-
-Wherever you see `[Name]`, something is being grouped:
-
-```dgmo-source
-[Backend]              // group in infra, boxes-and-lines, C4
-[To Do]                // column in kanban
-[Sprint 1]             // swimlane in gantt
-[Marketing]            // container in sitemap
-[Caribbean]            // category in scatter charts
-[Royal Navy]           // group in timeline
-```
-
-Content indented below the bracket line belongs to that group. Bracket grouping works in sequence, infra, flowchart, state, org, kanban, sitemap, gantt, boxes-and-lines, timeline, and scatter/bubble diagrams. When you see brackets, read them as "these things go together."
-
-Groups can have color suffixes and pipe metadata:
-
-```dgmo-source
-[Backend](blue) | team: Platform
-  API
-  Database
-  Cache
-```
-
----
-
-## One Arrow Vocabulary
-
-DGMO uses the same small set of arrow patterns everywhere:
-
-| Pattern | Meaning | Example |
-|---------|---------|---------|
-| `->` | Synchronous / directed | `API -> Database` |
-| `~>` | Asynchronous | `API ~> Queue` |
-| `-label->` | Labeled edge | `-routes-> UserService` |
-| `~label~>` | Labeled async edge | `~notify~> Email` |
-| `-(color)->` | Colored edge | `-(red)-> Fallback` |
-| `<->` | Bidirectional | `A <-> B` |
-
-The label goes between the dashes (or tildes). Color goes in parens on the label. This works identically in sequence, infra, flowchart, C4, ER, class, sitemap, and boxes-and-lines diagrams.
-
-Learn it once, use it everywhere.
-
----
-
-## Pipe Metadata: The Universal "And Also..."
-
-When you need to attach extra information to something, the pipe `|` syntax works on almost anything:
-
-```dgmo-source
-API | description: Main gateway, team: Platform
-API -routes-> UserService | frequency: High
-[Backend] | owner: Platform Team
-10bd Database Schema | p: Foundation, 80%
-1718-05 Blockade | p: Blackbeard
-Card Title | priority: High, assignee: Alice
-```
-
-Nodes, edges, groups, tasks, events, cards — if it exists in DGMO, you can probably pipe metadata onto it. The format is always `| key: value, key2: value2`.
-
----
-
-## Describe Relationships, Not Layouts
-
-DGMO diagrams have no x/y coordinates, no manual positioning, no pixel-level control. You describe *what things are* and *how they connect*, and the layout engine handles placement.
-
-```dgmo-source
-// You write this
-CEO
-  CTO
-    Engineering
-    DevOps
-  CFO
-    Finance
-
-// DGMO handles the layout
-```
-
-This is a trade-off:
-
-- Diagrams reflow cleanly when content changes — add a node and everything adjusts
-- Version control diffs are meaningful (text changes, not coordinate noise)
-- You spend time on content, not dragging boxes around
-- But you don't get pixel-perfect placement
-
-If you find yourself wanting to control exact positions, you're probably fighting the tool. Instead, use groups, ordering, and direction options (`direction-tb`, `direction-lr`) to guide the layout.
-
----
-
-## Options Are Simple Toggles
-
-Configuration goes at the top of the diagram as plain keywords:
-
-```dgmo-source
-gantt Product Launch
-start 2026-03-15
-today-marker
-critical-path
-no-dependencies
-active-tag Team
-```
-
-- **Boolean options**: bare keyword turns it on, `no-` prefix turns it off (`activations` / `no-activations`)
-- **Value options**: keyword followed by the value, space-separated (`start 2026-03-15`)
-- No YAML, no JSON, no nested config blocks
-- Options must appear before diagram content
-
----
-
-## The Colon Rule
-
-Colons show up in exactly two situations:
-
-**1. Open-ended metadata** — when you're defining freeform key-value pairs:
-```dgmo-source
-API | description: Main gateway         // pipe metadata
-  role: Senior Engineer                 // org/C4 indented metadata
-```
-
-**2. Type separators** — where both sides can contain spaces and a delimiter is needed:
-```dgmo-source
-+ name: string                          // class field type
-+ sail(): void                          // class method return
-Trajectory(blue): -0.001*x^2 + 0.27*x  // function expression
-```
-
-**No colons anywhere else** — declarations, options, tags, data rows, arrows, groups, and comments are all colon-free:
-```dgmo-source
-bar Revenue by Quarter                  // declaration: no colon
-tag Team alias t                        // tag: no colon
-start 2026-03-15                        // option: no colon
-Gold 3500 4200 5100                     // data row: no colon
-id int pk                               // ER column: no colon
-latency-ms 50                           // infra property: no colon
-```
-
-The intuition: **if DGMO already knows what the fields are, spaces are enough. Colons appear only when you're defining something freeform or need an unambiguous separator.**
-
----
-
-## One Diagram Per File
-
-The first line declares the chart type. There's no way to embed multiple diagrams in a single file. One file, one diagram, one clear purpose.
-
-```dgmo-source
-sequence Auth Flow
-// everything below is this one diagram
-```
-
-## Comments Are Full-Line Only
-
-```dgmo-source
-// This is a comment
-API -> Database  // This is NOT a comment — it's part of the line
-```
-
-Use `//` at the start of a line. There are no inline comments. `#` is not a comment character.

package/docs/guide/index.md

@@ -1,63 +0,0 @@
-# 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)**.
-
-## DGMO and Diagrammo
-
-**DGMO** is the plain-text markup language you write. **Diagrammo** is the app you write it in.
-
-Think of it like Markdown and your editor — Markdown is the syntax, and you can write it anywhere. DGMO works the same way: it's a `.dgmo` text file that describes a diagram. You can create and edit `.dgmo` files in the Diagrammo desktop app, the online editor, Obsidian (via plugin), or any text editor. The `dgmo` CLI renders them from the terminal, and the `@diagrammo/dgmo` npm package lets you render them programmatically.
-
-The name "DGMO" is shorthand for "Diagrammo" — shorter to type, easier to use as a file extension and command name.
-
-## 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

@@ -1,49 +0,0 @@
-# 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

@@ -1,58 +0,0 @@
-{
-  "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": "how-dgmo-thinks", "title": "How DGMO Thinks", "group": "getting-started", "file": "how-dgmo-thinks.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", "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-mindmap", "title": "Mind Map", "group": "software", "file": "chart-mindmap.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-wireframe", "title": "Wireframe", "group": "software", "file": "chart-wireframe.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-cycle", "title": "Cycle Diagram", "group": "data", "file": "chart-cycle.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-journey-map", "title": "Journey Map", "group": "business", "file": "chart-journey-map.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-pyramid", "title": "Pyramid Diagram", "group": "business", "file": "chart-pyramid.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-tech-radar", "title": "Technology Radar", "group": "business", "file": "chart-tech-radar.md" },
-    { "slug": "chart-venn", "title": "Venn Diagram", "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" }
-  ]
-}