The Editor & Visualizer

The editor is a left/right surface: write AgentMark on the left, watch the SVG diagram render on the right. Everything runs in your browser — there is no backend and nothing to save.

Live feedback

• Diagram — re-rendered on every keystroke.
• Linter panel — the well-formedness findings (rules W-1…W-14) with their line numbers, plus the conformance profile badge (sketch / spec / decision) and error/warning counts.
• Staleness panel — claims/decisions past their review_by, evaluated against today's date.

Views (projections)

One document, many diagrams. The tabs above the canvas are the views declared in your doc plus all. A view filters the topology by node type — and for knowledge views it synthesises a graph:

view topology:
  show: [human, harness, agent, middleware, mcp, model]
view decision:
  show: [decision, constraint, claim, landscape]

The decision view renders the dependency graph decision → supported_by claims / constrained_by constraints, not an empty canvas. Load the Hermes (full) example and click between topology, decision and risk to see it.

Layout direction

The layout selector switches the flow:

• auto — follow the doc's frontmatter direction: (left→right if unset)
• left → right (LR)
• top → bottom (TB)

---
agentmark: 0.2.0
title: Top-down
direction: TB
---
[User] -> [Agent] -> [Model]

Sharing

The current script is stored in the URL as ?p=<base64> (debounced as you type). Share link copies a /editor?p=… URL — open it anywhere to load the exact diagram. The example cards on the home page are just pre-encoded share links.

Exporting

Action	What you get
Copy image	A PNG on the clipboard — paste straight into Notion, Slack, Docs, …
PNG	Downloads a 2× PNG
SVG	Downloads the vector SVG
Copy SVG	SVG markup on the clipboard
Mermaid	A flowchart definition on the clipboard (honours the current view + direction)

The bg selector controls the export background:

• white — solid white canvas with dark text (best for docs / Notion)
• transparent — no background; PNG keeps a real alpha channel and text follows your theme (best for slides / overlays)

The on-screen canvas is always transparent and theme-aware, so it blends into light or dark mode.

Editing comfort

• Line numbers and AgentMark syntax highlighting.

• Keyword hinting / autocomplete — context-aware suggestions as you type (or press Ctrl+Space):

  • existing node references you've already declared, offered first so you reuse them — typing [har suggests harness#hermes (with its label), not just the bare type
  • node types inside [… (e.g. [ag → agent)
  • block keywords at the start of a line (constr → constraint)
  • frontmatter keys inside the --- … --- preamble
  • enum values after a known key (level: → MUST / MUST_NOT / …, confidence:, risk:, status:, orientation:, align:, direction:, …)
  • field keys on indented lines (sup → supported_by)

  The suggestions come straight from @agentmark/core (the node vocabulary + enums), so they always match the spec.

• A keys toggle for Vim keybindings (persisted).

• Indentation is significant in AgentMark, so the editor never auto-indents.

• Monospace ligatures are disabled, so arrows render as the literal characters you type (->, =>, x>, ~>, <->).

Node shapes

Each node is drawn as a distinct shape based on its layer (agents are pills, models ellipses, tools hexagons, storage cylinders, governance diamonds, infra sharp rectangles, …) so the diagram reads at a glance and survives a black-and-white printer. See Node shapes for the full key.

Theme

The toggle in the nav cycles light → dark → system (persisted). The diagram and the editor follow the active theme.