Think visually. Edit precisely.

Choose a view for the task

Canvas is useful for positioning, selection, styling, and arranging components. Code makes relationships and labels explicit. Split view lets you edit source while checking the rendered result; drag the divider to give either pane more space.

Start from a compatible example

The public examples use Mermaid source. Create a file, open Code, and paste one complete example into the editor. Check the detected diagram language and rendered preview. The editor also supports ArchScript workflows; do not combine different languages in the same source block.

Use the editor guide and templates for the syntax of the selected diagram language. If a change fails to render, reduce it to the smallest edit and verify brackets, identifiers, and connection syntax.

Keep changes understandable

1. Use short, stable identifiers and human-readable labels.
2. Change a small group of relationships, then inspect the preview.
3. Save a version before a large rewrite or AI change.
4. Export source for a code-based handoff and an editable backup to retain project editing data.

Treat layout and source as a pair

Some canvas details depend on the diagram language and rendering mode. After source changes, inspect component positions, icons, labels, and edge routing. Use undo for a recent local change and restore a saved version for an earlier checkpoint.