forma-diagrams 0.5.2

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.
Files changed (109) hide show
  1. package/Dockerfile +16 -0
  2. package/LICENSE +21 -0
  3. package/README.md +113 -0
  4. package/THIRD_PARTY_NOTICES.md +20 -0
  5. package/bin/forma +3 -0
  6. package/deploy/.env.example +11 -0
  7. package/deploy/Caddyfile +4 -0
  8. package/deploy/compose.yml +38 -0
  9. package/dist/assets/IBMPlexSans-Regular-Bl2SjS7V.ttf +0 -0
  10. package/dist/assets/IBMPlexSans-SemiBold-B9auKknr.ttf +0 -0
  11. package/dist/assets/elk.bundled-Y7ymokgr.js +24 -0
  12. package/dist/assets/index-_kg9cdik.css +1 -0
  13. package/dist/assets/index-al0xDdTG.js +452 -0
  14. package/dist/fonts/IBMPlexSans-Regular.ttf +0 -0
  15. package/dist/fonts/IBMPlexSans-SemiBold.ttf +0 -0
  16. package/dist/fonts/OFL.txt +93 -0
  17. package/dist/index.html +14 -0
  18. package/dist/licenses/FORMA_LICENSE.txt +21 -0
  19. package/dist/licenses/THIRD_PARTY_LICENSES.txt +11601 -0
  20. package/docs/api.md +41 -0
  21. package/docs/decisions/001-foundation.md +57 -0
  22. package/docs/decisions/002-composition-and-human-edits.md +47 -0
  23. package/docs/decisions/003-general-composition.md +30 -0
  24. package/docs/decisions/004-library-and-distribution.md +33 -0
  25. package/docs/decisions/005-organizational-hosting.md +33 -0
  26. package/docs/decisions/006-hosted-agent-access.md +25 -0
  27. package/docs/format.md +132 -0
  28. package/docs/gallery.md +73 -0
  29. package/docs/images/architecture.png +0 -0
  30. package/docs/images/editor.png +0 -0
  31. package/docs/images/gallery/architecture.png +0 -0
  32. package/docs/images/gallery/decision.png +0 -0
  33. package/docs/images/gallery/development-signal.png +0 -0
  34. package/docs/images/gallery/development.png +0 -0
  35. package/docs/images/gallery/editor-roundtrip.png +0 -0
  36. package/docs/images/gallery/entities.png +0 -0
  37. package/docs/images/gallery/mindmap.png +0 -0
  38. package/docs/images/gallery/organization.png +0 -0
  39. package/docs/images/gallery/timeline.png +0 -0
  40. package/docs/images/release.png +0 -0
  41. package/docs/install.md +50 -0
  42. package/docs/plans/mvp.md +24 -0
  43. package/docs/self-hosting.md +167 -0
  44. package/docs/verification-v2.md +41 -0
  45. package/docs/verification-v3.md +16 -0
  46. package/docs/verification-v4.1.md +35 -0
  47. package/docs/verification-v4.2.md +20 -0
  48. package/docs/verification-v4.3.md +5 -0
  49. package/docs/verification-v4.md +31 -0
  50. package/docs/verification-v5.1.md +7 -0
  51. package/docs/verification-v5.2.md +7 -0
  52. package/docs/verification-v5.md +7 -0
  53. package/docs/verification.md +91 -0
  54. package/examples/design-systems/atelier.json +53 -0
  55. package/examples/design-systems/signal.json +53 -0
  56. package/examples/gallery/architecture.forma.json +178 -0
  57. package/examples/gallery/decision.forma.json +182 -0
  58. package/examples/gallery/development-signal.forma.json +299 -0
  59. package/examples/gallery/development.forma.json +299 -0
  60. package/examples/gallery/entities.forma.json +123 -0
  61. package/examples/gallery/mindmap.forma.json +158 -0
  62. package/examples/gallery/organization.forma.json +151 -0
  63. package/examples/gallery/timeline.forma.json +138 -0
  64. package/examples/platform.forma.json +116 -0
  65. package/examples/release.forma.json +58 -0
  66. package/examples/roundtrip/agent-continued.forma.json +310 -0
  67. package/examples/roundtrip/agent-patch.json +7 -0
  68. package/examples/roundtrip/human-edited.forma.json +309 -0
  69. package/package.json +81 -0
  70. package/packages/cli/bin.mjs +3 -0
  71. package/packages/cli/src/agent-access.ts +232 -0
  72. package/packages/cli/src/blob-store.ts +241 -0
  73. package/packages/cli/src/file-library.ts +179 -0
  74. package/packages/cli/src/google.ts +51 -0
  75. package/packages/cli/src/hosted.ts +498 -0
  76. package/packages/cli/src/http.ts +67 -0
  77. package/packages/cli/src/index.ts +397 -0
  78. package/packages/cli/src/mcp.ts +114 -0
  79. package/packages/cli/src/remote.ts +228 -0
  80. package/packages/cli/src/server.ts +69 -0
  81. package/packages/cli/src/signed-cookie.ts +42 -0
  82. package/packages/core/src/align.ts +237 -0
  83. package/packages/core/src/document.ts +408 -0
  84. package/packages/core/src/font-metrics.json +1 -0
  85. package/packages/core/src/geometry.ts +463 -0
  86. package/packages/core/src/index.ts +12 -0
  87. package/packages/core/src/inspect.ts +230 -0
  88. package/packages/core/src/layout.ts +450 -0
  89. package/packages/core/src/render.ts +182 -0
  90. package/packages/core/src/resolve-style.ts +29 -0
  91. package/packages/core/src/scene.ts +40 -0
  92. package/packages/core/src/styles.ts +122 -0
  93. package/packages/core/src/text.ts +81 -0
  94. package/packages/core/src/theme.ts +33 -0
  95. package/public/fonts/IBMPlexSans-Regular.ttf +0 -0
  96. package/public/fonts/IBMPlexSans-SemiBold.ttf +0 -0
  97. package/public/fonts/OFL.txt +93 -0
  98. package/schema/design-system.v1.schema.json +734 -0
  99. package/schema/forma.v1.schema.json +273 -0
  100. package/schema/forma.v2.schema.json +1756 -0
  101. package/skills/forma/SKILL.md +20 -0
  102. package/skills/forma/references/composition.md +11 -0
  103. package/skills/forma/references/hosted.md +28 -0
  104. package/skills/forma-architecture/SKILL.md +14 -0
  105. package/skills/forma-entities/SKILL.md +14 -0
  106. package/skills/forma-flow/SKILL.md +14 -0
  107. package/skills/forma-mindmap/SKILL.md +14 -0
  108. package/skills/forma-organization/SKILL.md +14 -0
  109. package/skills/forma-timeline/SKILL.md +14 -0
@@ -0,0 +1,20 @@
1
+ ---
2
+ name: forma
3
+ description: Create, modify, inspect, and export professional diagrams using Forma's local files, CLI, and shared graphical editor.
4
+ ---
5
+
6
+ # Forma
7
+
8
+ Use `forma` after installation, or `node packages/cli/bin.mjs` from a source checkout; `--help` returns JSON. Run `forma serve --directory ~/Forma` to share a folder and its subfolders with the graphical Library. Reload files before agent edits and refresh the Library afterward. No account or particular agent harness is needed for local use.
9
+
10
+ If the user gives a hosted origin and agent token, set `FORMA_REMOTE_URL` and `FORMA_AGENT_TOKEN_FILE` (private `chmod 600` file) and use `forma remote` or `forma mcp`. Never use Google cookies. Pull/read the latest revision, preserve IDs and `presentation.nodes`, then push with the bound revision. See [hosted access](references/hosted.md).
11
+
12
+ Write a version 2 native document with stable node/edge/group IDs, short labels, relationships, and meaningful roles. No diagram type is required. `create --output diagram.forma.json` produces a blank document. The [format reference](../../docs/format.md) explains primitives, composition, style precedence, and patching.
13
+
14
+ Prefer semantic relationships and automatic layout. Use a composition grid when relative rows and columns carry meaning. Use human position overrides for deliberate exceptions. Nodes default to one connection point per side; set `ports` and edge `sourceIndex` / `targetIndex` when a side needs more. Set edge `path` to pin corners, and preserve an existing path. `align` is left, center, or right; `verticalAlign` is top, middle, or bottom. Adopt an organizational identity with `style diagram.forma.json --system examples/design-systems/atelier.json`; per-element styles remain intact.
15
+
16
+ Run `validate`, `inspect`, and `render --output diagram.png` on the artifact. If inspect reports `near-alignment`, run `forma align diagram.forma.json --fix`, or align specific nodes with `--left|--center|--right|--top|--middle|--bottom --ids a,b`. Use `--distribute horizontal|vertical --ids a,b,c` to even gaps. Alignment writes pins; preserve them. **View the actual render** and refine its hierarchy, spacing, routing, and readability. Zero diagnostic warnings is useful evidence, not proof of good design. Deliver the native file and export together.
17
+
18
+ For edits, reload the human's latest saved file and use `patch --patch changes.json`. Preserve IDs and presentation overrides. Never reconstruct a diagram merely to add a node or change a label. `layout --output scene.json` is derived geometry, never the source artifact. CLI exit 1 means invalid input/execution; inspect exits 2 for errors (also warnings with `--strict`).
19
+
20
+ Use a specialist only if it helps: [architecture](../forma-architecture/SKILL.md), [decisions and flows](../forma-flow/SKILL.md), [organization](../forma-organization/SKILL.md), [entities](../forma-entities/SKILL.md), [timelines](../forma-timeline/SKILL.md), [mind maps](../forma-mindmap/SKILL.md). For an unfamiliar explanation, combine primitives directly; skills are accelerators, not boundaries. See [composition](references/composition.md) when refining.
@@ -0,0 +1,11 @@
1
+ # Refine the composition
2
+
3
+ Begin with the sentence the diagram should explain. Keep one dominant reading direction or one explicit center. Groups should express ownership, trust, or a conceptual boundary; avoid a container around every object.
4
+
5
+ Use automatic layout for relationships, a grid when relative rows/columns communicate meaning, and explicit human pins for exceptions. Each shape has one connection point per side. Add `ports` only when several connectors need distinct attachments, and set `sourceIndex` / `targetIndex` to choose one. Leave indexes unset to share the center point; overlapping horizontal or vertical runs are intentional when connectors should read as one line. Set an edge `path` when the route itself carries meaning, and do not clear it during a later edit. Automatic routing keeps an existing bend when it still leaves the same side, and it prefers a detour over a crossing. After pinning, `inspect` reports `near-alignment` when edges sit within 8px of a shared row or column; `forma align --fix` snaps them. Prefer a shared design system and a few semantic roles over repeated element styling. A familiar diagram skill can accelerate this; an unfamiliar explanation can use the same primitives directly.
6
+
7
+ Before delivery, view the render at a useful reading size. Check title hierarchy, label legibility, balanced whitespace, group headings, connector attachment, and the distinction between primary and secondary information. Check fixed-color overrides under every intended identity; changing a background may require an explicit foreground too. Machine inspection reports symptoms, not aesthetic approval. Do not delete meaningful edges to silence warnings.
8
+
9
+ Preserve human pins while improving surrounding spacing or structure. Clear only a deliberate position with `{"overrides":{"nodeId":{"position":null}}}` when returning that node to automatic layout is appropriate. Do not clear all overrides as a routine fix.
10
+
11
+ Favor focused views over tiny text. Use SVG for scalable graphics and PNG for destinations that need raster output. Always retain the native document for future human and agent edits.
@@ -0,0 +1,28 @@
1
+ # Hosted agent access
2
+
3
+ Use this only when the user has a hosted Forma workspace and has given you an agent token from **Agent access**. Do not ask for Google credentials or browser cookies.
4
+
5
+ ```sh
6
+ export FORMA_REMOTE_URL=https://diagrams.example.com
7
+ umask 077
8
+ printf '%s\n' "$TOKEN" > "$HOME/.config/forma/agent.token"
9
+ chmod 600 "$HOME/.config/forma/agent.token"
10
+ export FORMA_AGENT_TOKEN_FILE="$HOME/.config/forma/agent.token"
11
+ # Prefer the file. Use FORMA_AGENT_TOKEN only in a secret environment, never both.
12
+ ```
13
+
14
+ ```sh
15
+ forma remote whoami
16
+ forma remote list
17
+ forma remote pull path/to/diagram.forma.json --output diagram.forma.json
18
+ # edit the native file with validate / inspect / render
19
+ forma remote push diagram.forma.json
20
+ ```
21
+
22
+ `--create --path folder/name.forma.json` creates a new server file. `--overwrite` on pull replaces a local file and sidecar after you have preserved local edits.
23
+
24
+ The sidecar `diagram.forma.json.forma-remote.json` binds server, owner, path, and revision. Do not copy it onto a different user, host, or path. A conflict means the file changed on the server: pull into a new output path, reconcile, and push that copy.
25
+
26
+ `forma mcp` exposes `forma_list_diagrams`, `forma_read_diagram`, `forma_write_diagram`, `forma_inspect_diagram`, and `forma_render_svg` over the same token. Write requires the latest revision; `null` creates a new file only. HTTP `/mcp` exists only if the administrator enabled it; the stdio bridge works without that.
27
+
28
+ The token can only see that user’s library, optionally limited to one folder prefix. A 401 after a working session usually means expiry or revocation.
@@ -0,0 +1,14 @@
1
+ ---
2
+ name: forma-architecture
3
+ description: Compose software architecture, network boundaries, and data-flow diagrams with Forma.
4
+ ---
5
+
6
+ # Forma architecture
7
+
8
+ Use [the shared file and CLI workflow](../forma/SKILL.md). This skill supplies composition guidance, not a required diagram type.
9
+
10
+ Choose one audience and abstraction level. A context or container view is often enough; do not mix individual functions with whole systems. Group by ownership or trust boundary, not merely proximity.
11
+
12
+ Use nodes for components, directed edges for interactions, and short edge labels for protocol or data. Use `kind` freely for domain meaning; it does not select a renderer. Prefer `layout.direction: RIGHT`, a shared design system, and `role: emphasis` on the primary boundary. Use cylinder geometry only where persistent storage matters. Separate async work with a labeled edge rather than color alone.
13
+
14
+ Start from [the architecture example](../../examples/gallery/architecture.forma.json) for conventions, replacing content and stable IDs deliberately. Avoid copying its positions; it is automatically laid out. Render, inspect, and verify arrow direction and trust boundaries. See [C4 levels](https://c4model.com/diagrams) for choosing scope.
@@ -0,0 +1,14 @@
1
+ ---
2
+ name: forma-entities
3
+ description: Compose entity-relationship and logical data model diagrams with Forma.
4
+ ---
5
+
6
+ # Forma entities
7
+
8
+ Use [the shared file and CLI workflow](../forma/SKILL.md). This skill supplies composition guidance, not a required diagram type.
9
+
10
+ Name entities with singular nouns. Decide whether this is a logical model or physical schema before adding attributes. For a physical schema, use descriptions with one attribute per line and explicit PK/FK prefixes; keep only attributes needed to explain the model.
11
+
12
+ Use rectangles of consistent width, arrowless connectors, and explicit cardinality labels such as `1 → 0..many`. Forma currently uses text cardinality rather than native crow's-foot markers: do not imply strict crow's-foot compliance. Edge labels read from source to target. Put the focal entity at the center of the narrative, with one emphasis role.
13
+
14
+ Use automatic RIGHT layout first. [The entity example](../../examples/gallery/entities.forma.json) shows keys, attributes, and cardinality. Check that each FK agrees with its relationship. For conventions see [ER notation](https://mermaid.js.org/syntax/entityRelationshipDiagram.html); use Forma JSON rather than Mermaid syntax.
@@ -0,0 +1,14 @@
1
+ ---
2
+ name: forma-flow
3
+ description: Compose process flows and decision trees with Forma, including readable exception and retry paths.
4
+ ---
5
+
6
+ # Forma flow
7
+
8
+ Use [the shared file and CLI workflow](../forma/SKILL.md). This skill supplies composition guidance, not a required diagram type.
9
+
10
+ Use verbs for actions and questions for decisions. Label each decision branch explicitly; keep the normal path visually direct. Use pill shapes for entry/exit, rectangles for work, and diamonds for decisions only when they help comprehension.
11
+
12
+ Start with automatic DOWN layout. For a carefully aligned primary path, use grid placement with its steps in one column and exceptions beside it. `appearance.sourcePort` and `targetPort` can select top/right/bottom/left so retry loops enter from the side instead of crossing the normal path. Dashed lines can distinguish feedback, but label them too.
13
+
14
+ Use a shared design system and roles before specifying colors. Read [the flow example](../../examples/gallery/decision.forma.json) for a complete retry composition. Inspect branch labels and actual rendered routes; do not silently remove an edge to improve the picture.
@@ -0,0 +1,14 @@
1
+ ---
2
+ name: forma-mindmap
3
+ description: Compose concept maps and exploratory mind maps with Forma.
4
+ ---
5
+
6
+ # Forma mindmap
7
+
8
+ Use [the shared file and CLI workflow](../forma/SKILL.md). This skill supplies composition guidance, not a required diagram type.
9
+
10
+ Start with one central question or concept and a small number of distinct branches. Label branches with concepts, not vague category names. Use descriptions for supporting ideas and avoid coloring every node differently.
11
+
12
+ A one-sided map can use automatic RIGHT layout; a balanced map can use grid cells around the center and straight, arrowless edges. Use an ellipse for the central concept and rectangles for branches. Nested groups are useful only for actual conceptual boundaries.
13
+
14
+ [The mind map example](../../examples/gallery/mindmap.forma.json) uses a cross composition around one question. Let the design system set the visual identity. Check that the center remains dominant and connectors do not pass through unrelated concepts. This grid approach also works for explanations without a named diagram category.
@@ -0,0 +1,14 @@
1
+ ---
2
+ name: forma-organization
3
+ description: Compose readable reporting and ownership hierarchies with Forma.
4
+ ---
5
+
6
+ # Forma organization
7
+
8
+ Use [the shared file and CLI workflow](../forma/SKILL.md). This skill supplies composition guidance, not a required diagram type.
9
+
10
+ Put roles or teams in node labels, responsibilities in descriptions. Use DOWN layout and arrowless connectors (`designSystem.edge.arrowEnd: none`) for reporting. Reserve emphasis for the focal leadership role; keep peers equal in size and tone.
11
+
12
+ Distinguish reporting from collaboration with explicit labels and dashed connectors if both are necessary. Avoid decorative containers around every team. A small hierarchy works automatically; use grid rows for levels and balanced columns for peers when presentation matters more than compactness.
13
+
14
+ [The organization example](../../examples/gallery/organization.forma.json) demonstrates a small hierarchy with only one size override and semantic roles. Validate that every line represents an actual relationship; whitespace should clarify authority, not imply an extra rank.
@@ -0,0 +1,14 @@
1
+ ---
2
+ name: forma-timeline
3
+ description: Compose phase roadmaps and milestone timelines with Forma.
4
+ ---
5
+
6
+ # Forma timeline
7
+
8
+ Use [the shared file and CLI workflow](../forma/SKILL.md). This skill supplies composition guidance, not a required diagram type.
9
+
10
+ Choose whether spacing represents order or elapsed time. State that choice in the diagram description. A composition grid gives equal phase spacing; it must not imply a calibrated time axis. If calendar duration matters, use deliberate positions and label dates clearly.
11
+
12
+ Use increasing columns for chronology, concise dates in descriptions, and one emphasis role for the current or focal phase. Labels should describe outcomes rather than a list of every task. Use rows for parallel workstreams when needed; keep the same column meaning across rows.
13
+
14
+ [The timeline example](../../examples/gallery/timeline.forma.json) uses four equal phases and states that they are not time-scaled. Render and check date order, label width, and spacing. This is a diagram, not a scheduling or dependency-analysis engine.