# AGENTS.md — Build guide for Mermaid Chart ## Project scope Edit Mermaid source beside a sanitized preview, surface parse errors at the relevant line and save named revisions. Provide pan/zoom and SVG export, with optional AI suggestions shown as source diffs. Catalogue verdict: yes. Mermaid Chart's solo core is compact: build a browser-based diagram-as-code editor with drag, resize, connect, keyboard shortcuts, autosave, and SVG or PNG export. A competent builder can reach a useful personal version in one sitting, while the paid product mainly wins on interaction polish, collaboration. Use the implementation prompt below to define the deliverable. Complete each phase's acceptance checks before extending the scope. ## Working agreement - Inspect the repository and its existing instructions before choosing paths, dependencies or commands. Keep one coherent stack and explain changes to the proposed architecture. - Plan a vertical slice that accepts a real input and produces the useful output described below. Persist only the state the prompt calls for; respect memory-only and upstream-managed workflows. Use fixtures only when they are clearly labelled. - After scaffolding, document the actual install, development, check and build commands in README and keep them synchronized with the package or project manifest. Do not report commands as successful unless they ran. - Work in small steps. At handoff, list implemented flows, checks actually performed, remaining blockers, and any credentials or provider setup the owner must supply. - Do not publish, spend money, contact customers, delete source data or run irreversible migrations without the project owner's authorization. ## Prerequisites - A supported Node release, a writable local data directory and a separate backup location. Bind to localhost; remote use requires authentication and HTTPS first. - Implementation components: Node.js, TypeScript and Express with server-rendered HTML and small browser modules. SQLite through better-sqlite3 with migrations, prepared statements and a single background worker. Monaco source editor and a pinned Mermaid renderer with strict security configuration and visible syntax diagnostics. - Scope boundary: high-fidelity import and export; presentation and enterprise controls ## Stack and architecture - Node.js, TypeScript and Express with server-rendered HTML and small browser modules. - SQLite through better-sqlite3 with migrations, prepared statements and a single background worker. - Monaco source editor and a pinned Mermaid renderer with strict security configuration and visible syntax diagnostics. - Domain model: Mermaid source documents, syntax versions, render diagnostics, diagram revisions and export settings ## Security and data integrity - Reject unexpected origins and unbounded request bodies even on localhost. Keep credentials outside the database export and redact sensitive text from logs. - Correctness boundary: Source text is canonical; visual controls must make explicit source edits and unsupported syntax cannot be silently dropped. - Use short SQLite transactions and persist job state before starting work. Give retries stable operation IDs; report incomplete or unknown results instead of silently repeating them. - Use a consistent SQLite backup and an attachment manifest. Export portable JSON/CSV, then restore to a new directory without overwriting the original data. ## Agent implementation rules - Project rule — data model: Mermaid source documents, syntax versions, render diagnostics, diagram revisions and export settings - Project rule — preserve this invariant: Source text is canonical; visual controls must make explicit source edits and unsupported syntax cannot be silently dropped. - Project rule — acceptance evidence: An invalid diagram keeps the previous source editable and shows a parser error; rejecting an AI diff leaves the saved diagram unchanged. ## Optional agent skills and references - Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission. - Optional external skill: [sharp-edges](https://github.com/trailofbits/skills/blob/main/plugins/sharp-edges/skills/sharp-edges/SKILL.md) — Review security-sensitive APIs and configuration for dangerous defaults and easy-to-misuse interfaces. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission. Read the linked SKILL.md and its dependencies before adding a skill. Select only the skills matching this project's runtime and task; their documentation does not supply API access, credentials or approval to perform external actions. Pin the reviewed revision where the tool supports it. Follow the chosen agent's documented project-level installation mechanism. ## Distribution ideas These are optional planning notes. Obtain the owner's approval before publishing or contacting anyone. - Demonstrate the actual Mermaid Chart-inspired workflow with owned or clearly labeled sample data: Edit Mermaid source beside a sanitized preview, surface parse errors at the relevant line and save named revisions. Provide pan/zoom and SVG export, with optional AI suggestions shown as source diffs. - Publish a reproducible walkthrough with this observable result: An invalid diagram keeps the previous source editable and shows a parser error; rejecting an AI diff leaves the saved diagram unchanged. - Explain who can operate this scoped tool, its setup and ongoing costs, and these remaining product gaps: high-fidelity import and export; presentation and enterprise controls Avoid guaranteed savings, performance scores or implied endorsement. ## Engineering roadmap 1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Edit Mermaid source beside a sanitized preview, surface parse errors at the relevant line and save named revisions. Provide pan/zoom and SVG export, with optional AI suggestions shown as source diffs. Record prerequisites, select representative user-owned fixtures and document the unsupported features: high-fidelity import and export; presentation and enterprise controls 2. Phase 2 — Durable model. Model Mermaid source documents, syntax versions, render diagnostics, diagram revisions and export settings Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: Source text is canonical; visual controls must make explicit source edits and unsupported syntax cannot be silently dropped. 3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Use short SQLite transactions and persist job state before starting work. Give retries stable operation IDs; report incomplete or unknown results instead of silently repeating them. 4. Phase 4 — Permissions and integration failure. Reject unexpected origins and unbounded request bodies even on localhost. Keep credentials outside the database export and redact sensitive text from logs. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results. 5. Phase 5 — Portable handoff. Use a consistent SQLite backup and an attachment manifest. Export portable JSON/CSV, then restore to a new directory without overwriting the original data. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README. 6. Phase 6 — Acceptance scenarios. An invalid diagram keeps the previous source editable and shows a parser error; rejecting an AI diff leaves the saved diagram unchanged. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder. ## Paid-product capabilities outside this build - high-fidelity import and export - presentation and enterprise controls - multiplayer cursors and comments - large template libraries ## Implementation prompt WORKING SLICE Edit Mermaid source beside a sanitized preview, surface parse errors at the relevant line and save named revisions. Provide pan/zoom and SVG export, with optional AI suggestions shown as source diffs. Build this scoped Mermaid Chart-inspired workflow with a documented data model and visible failure states. Architecture - Node.js, TypeScript and Express with server-rendered HTML and small browser modules. - SQLite through better-sqlite3 with migrations, prepared statements and a single background worker. - Monaco source editor and a pinned Mermaid renderer with strict security configuration and visible syntax diagnostics. Prerequisites and limits A supported Node release, a writable local data directory and a separate backup location. Bind to localhost; remote use requires authentication and HTTPS first. Outside this release: high-fidelity import and export; presentation and enterprise controls Data model and correctness Mermaid source documents, syntax versions, render diagnostics, diagram revisions and export settings Invariant: Source text is canonical; visual controls must make explicit source edits and unsupported syntax cannot be silently dropped. Use short SQLite transactions and persist job state before starting work. Give retries stable operation IDs; report incomplete or unknown results instead of silently repeating them. Security and privacy Reject unexpected origins and unbounded request bodies even on localhost. Keep credentials outside the database export and redact sensitive text from logs. Recovery and export Use a consistent SQLite backup and an attachment manifest. Export portable JSON/CSV, then restore to a new directory without overwriting the original data. Implementation order 1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Edit Mermaid source beside a sanitized preview, surface parse errors at the relevant line and save named revisions. Provide pan/zoom and SVG export, with optional AI suggestions shown as source diffs. Record prerequisites, select representative user-owned fixtures and document the unsupported features: high-fidelity import and export; presentation and enterprise controls 2. Phase 2 — Durable model. Model Mermaid source documents, syntax versions, render diagnostics, diagram revisions and export settings Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: Source text is canonical; visual controls must make explicit source edits and unsupported syntax cannot be silently dropped. 3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Use short SQLite transactions and persist job state before starting work. Give retries stable operation IDs; report incomplete or unknown results instead of silently repeating them. 4. Phase 4 — Permissions and integration failure. Reject unexpected origins and unbounded request bodies even on localhost. Keep credentials outside the database export and redact sensitive text from logs. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results. 5. Phase 5 — Portable handoff. Use a consistent SQLite backup and an attachment manifest. Export portable JSON/CSV, then restore to a new directory without overwriting the original data. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README. 6. Phase 6 — Acceptance scenarios. An invalid diagram keeps the previous source editable and shows a parser error; rejecting an AI diff leaves the saved diagram unchanged. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder. Acceptance An invalid diagram keeps the previous source editable and shows a parser error; rejecting an AI diff leaves the saved diagram unchanged. Use real source data or clearly labeled fixtures. Explain unsupported input and provider failures; do not fabricate analytics, delivery receipts, accuracy claims or security guarantees. Optional agent guidance Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission. Optional external skill: [sharp-edges](https://github.com/trailofbits/skills/blob/main/plugins/sharp-edges/skills/sharp-edges/SKILL.md) — Review security-sensitive APIs and configuration for dangerous defaults and easy-to-misuse interfaces. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission. Project rule — data model: Mermaid source documents, syntax versions, render diagnostics, diagram revisions and export settings Project rule — preserve this invariant: Source text is canonical; visual controls must make explicit source edits and unsupported syntax cannot be silently dropped. Project rule — acceptance evidence: An invalid diagram keeps the previous source editable and shows a parser error; rejecting an AI diff leaves the saved diagram unchanged. ## Completion evidence Demonstrate the prompt's acceptance scenarios against the scoped workflow. Include setup from a clean checkout and failure recovery. Check persistence across restart and export/restore only for the state the prompt says to store; for memory-only tools, confirm that temporary content is discarded as specified. Record actual results and remaining limitations. A detailed plan alone does not establish a working replacement.