On this page
Logic → Diagram

See the logic before you build it.

Paste a process, policy, or intake steps — or pick one of the searchable examples — and turn them into a clear flowchart you can read, edit, and approve, right in your browser. Nothing is built until the logic is approved. Your text stays on your device (the live preview loads its diagram library from a CDN).

Educational and informational only — not legal or clinical advice. Map the shape of a process here; never paste a real family's confidential details into a shared or public place.

New here? This is one of the no-code tools — no install, all in your browser.

Extract the logic#

Loading the builder…

Approve, then build#

When the diagram reflects the real logic, set its Status to Approved, save it, and hand it to the CLI. Code is only generated from approved logic — this is the visualize-and-approve gate:

cotrackpro diagram extract process.md --out docs/diagram.md            # from a document
cotrackpro diagram extract my-set.json --from params --out docs/diagram.md  # from a parameter set
cotrackpro diagram check docs/diagram.md                                # validate the Mermaid
cotrackpro scaffold my-tool --diagram docs/diagram.md                   # builds only when Status: Approved

Straight from the catalog#

You don't have to start from a document — diagram a role or a workflow directly from the platform catalog. A role diagram shows its composed skills and always-on guardrails (the same child-centered & trauma-informed lens the catalog is organized around); a workflow diagram is the real step graph — call_skill, branches, and outputs. This is the offline mirror of the MCP server's get_role_diagrams.

cotrackpro diagram role cotrackpro-parent-survivor-safety   # composition + guardrails
cotrackpro diagram workflow custody-violation-response      # the real step graph

How it fits#

This is the visualize & approve stage — it sits between intent and implementation:

document / intent  →  extract logic  →  Mermaid-in-markdown  →  approval  →  scaffold  →  code

The extraction, rendering, and validation are one shared engine (@cotrackpro/sdk/diagram), so a diagram you make here behaves identically in the CLI — developers and non-developers work from the same picture, and nothing ships until a human signs off on it.