On this page
Logic → Diagram

See the logic before you build it.

Paste a process, policy, or intake steps 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.