Diagrams - Autype

Autype renders diagrams directly from text-based diagram languages. Write your diagram code in a fenced code block with the diagram language as the language identifier — it will be automatically rendered as an image in the exported document.

Diagrams are only rendered as images when Render as Image is enabled. You can control this globally via the Styles panel → Code Blocks setting, or override it per block with the renderAsImage attribute directly on the code block.

Basic syntax

Use a fenced code block with a supported diagram language:

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

The diagram is automatically rendered as a PNG image in the exported PDF/DOCX document.

Supported diagram languages

Language	Code identifier	Description
Mermaid	`mermaid`	Flowcharts, sequence diagrams, class diagrams, Gantt charts, and more
PlantUML	`plantuml`	UML diagrams (class, sequence, activity, use case, etc.)
GraphViz	`graphviz` or `dot`	Graph and network visualizations
Structurizr	`structurizr`	C4 architecture diagrams
BlockDiag	`blockdiag`	Simple block diagrams
SeqDiag	`seqdiag`	Sequence diagrams
ActDiag	`actdiag`	Activity diagrams with swimlanes
NwDiag	`nwdiag`	Network topology diagrams
PacketDiag	`packetdiag`	Packet/protocol header diagrams
C4 with PlantUML	`c4plantuml`	C4 architecture model using PlantUML syntax
DBML	`dbml`	Database markup language for ER diagrams
Ditaa	`ditaa`	ASCII art to diagram conversion
ERD	`erd`	Entity-relationship diagrams
TikZ	`tikz`	LaTeX-based technical drawings
UMlet	`umlet`	UML diagrams
Vega	`vega`	Declarative data visualizations
WireViz	`wireviz`	Wiring harness and cable documentation

Mermaid examples

Flowchart

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

Sequence diagram

```mermaid
sequenceDiagram
    participant Client
    participant API
    participant DB

    Client->>API: POST /render
    API->>DB: Save job
    DB-->>API: Job ID
    API-->>Client: 202 Accepted
```

Class diagram

```mermaid
classDiagram
    class Document {
        +String title
        +Section[] sections
        +render() PDF
    }
    class Section {
        +String type
        +Element[] content
    }
    Document "1" --> "*" Section
```

PlantUML example

```plantuml
@startuml
start
:Create document;
:Write content;
if (Has variables?) then (yes)
  :Substitute variables;
else (no)
endif
:Render DOCX;
:Convert to PDF;
stop
@enduml
```

GraphViz example

```graphviz
digraph G {
    rankdir=LR;
    node [shape=box, style=filled, fillcolor="#e8f4fd"];
    Frontend -> API;
    API -> Database;
    API -> Redis;
    Worker -> Redis;
    Worker -> S3;
}
```

Captions and anchors

Add caption and anchor attributes to include the diagram in the List of Figures and enable cross-references:

```mermaid{caption="System Architecture" anchor="fig-architecture"}
graph LR
    A[Client] --> B[API]
    B --> C[Database]
    B --> D[Cache]
```

This renders with: Figure 1: System Architecture Reference it elsewhere:

As shown in [Figure {num}](#fig-architecture), the system uses a layered design.

Alignment

Control horizontal alignment with the align attribute:

```mermaid{align="center" caption="Centered Diagram" anchor="fig-centered"}
graph LR
    A --> B --> C
```

Rendering as code (renderAsImage=false)

By default, diagram language code blocks are rendered as images. Set renderAsImage=false to display the source code as a regular code block instead:

```mermaid{renderAsImage=false}
graph TD
    A --> B
    B --> C
```

This is useful when you want to show the diagram source code to the reader rather than the rendered diagram.

When renderAsImage=false is set on a diagram code block, the block is treated as a regular code block. If it has a caption, it appears in the List of Code Listings instead of the List of Figures.

Global default

You can set the default for all code blocks in your document’s style settings:

defaults → styles → code → renderAsImage: true (default) or false

The element-level renderAsImage attribute always overrides the global default.

Attribute reference

Attribute	Values	Description
`renderAsImage`	`true`, `false`	Render as image (default: `true` for diagram languages) or show source code
`caption`	String	Figure caption for auto-numbering in the List of Figures
`anchor`	String	Anchor ID for cross-references
`align`	`left`, `center`, `right`	Horizontal alignment
`width`	Number (pixels)	Width of the rendered diagram image
`spacingBefore`	Number (pt)	Spacing before the diagram
`spacingAfter`	Number (pt)	Spacing after the diagram

Diagrams are rendered server-side during document export. In the live editor preview, diagram code blocks are displayed as syntax-highlighted code.

​Basic syntax

​Supported diagram languages

​Mermaid examples

​Flowchart

​Sequence diagram

​Class diagram

​PlantUML example

​GraphViz example

​Captions and anchors

​Alignment

​Rendering as code (renderAsImage=false)

​Global default

​Attribute reference

Basic syntax

Supported diagram languages

Mermaid examples

Flowchart

Sequence diagram

Class diagram

PlantUML example

GraphViz example

Captions and anchors

Alignment

Rendering as code (renderAsImage=false)

Global default

Attribute reference