Diagrams

AgentsInFlow ships with 28 diagram engines that render directly inside the editor. Diagrams work everywhere content appears: ticket descriptions, notes, dashboard widgets, and assistant chat. Each engine has its own syntax, but the workflow is always the same — wrap your diagram code in a fenced code block tagged with the engine name, and the rendered diagram appears inline.

Nine engines cover system design, UML, and database modeling.

Four engines for sequences, flowcharts, business processes, and activity workflows.

Four engines for network topology, packet layouts, server racks, and block diagrams.

Four engines for timing diagrams, byte layouts, HDL symbols, and wiring harnesses.

Five engines for hand-drawn sketches, ASCII art conversion, and precise technical illustrations.

Three engines for statistical charts and data-driven graphics. ECharts is the preferred engine for charts — see Editor & Diagrams for interactive chart widget details.

Create a fenced code block and set the language tag to the engine name. The renderer picks it up automatically.

Mermaid — Flowchart

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[End]
  C --> D
```

D2 — Architecture

```d2
web: Web Server
api: API Gateway
db: PostgreSQL

web -> api: REST
api -> db: queries
```

PlantUML — Sequence

```plantuml
@startuml
Client -> Server: Request
Server -> Database: Query
Database --> Server: Result
Server --> Client: Response
@enduml
```

Graphviz — Dependency Graph

```graphviz
digraph {
  rankdir=LR
  A -> B -> C
  A -> D -> C
}
```

Diagrams render inline as you type. The editor detects the code fence language tag, compiles the source through the matching engine, and replaces the code block with the rendered SVG or canvas output. Editing the source updates the preview in real time.

Diagrams are not limited to the editor. They render anywhere markdown content is displayed.

Ticket Descriptions

Add a diagram code fence to any ticket description or note. When the ticket is viewed on the Kanban board or in the inspector, the diagram renders inline with full zoom support.

Dashboard Widgets

Dashboard widgets accept diagram content directly. Create a widget with the diagram content type, specify the engine language and source, and the diagram renders inside the widget grid. Widgets are resizable and the diagram scales accordingly.

Assistant Chat

AI assistants can generate diagrams directly in chat responses. When an assistant produces a code fence with a recognized engine tag, the diagram renders inline in the conversation. This is useful for architecture discussions, flow explanations, and design reviews.

Use this quick reference to pick the best engine for your task.

Every rendered diagram can be exported for use outside AgentsInFlow. Right-click (or long-press on touch) a rendered diagram to open the context menu.

• Copy as SVG — vector output, ideal for documents and presentations
• Copy as PNG — raster output for quick sharing in chat or email
• Copy source — copies the raw diagram syntax to your clipboard
• Save to file — exports the diagram as an SVG or PNG file to disk