Skip to main content
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

LanguageCode identifierDescription
MermaidmermaidFlowcharts, sequence diagrams, class diagrams, Gantt charts, and more
PlantUMLplantumlUML diagrams (class, sequence, activity, use case, etc.)
GraphVizgraphviz or dotGraph and network visualizations
StructurizrstructurizrC4 architecture diagrams
BlockDiagblockdiagSimple block diagrams
SeqDiagseqdiagSequence diagrams
ActDiagactdiagActivity diagrams with swimlanes
NwDiagnwdiagNetwork topology diagrams
PacketDiagpacketdiagPacket/protocol header diagrams
C4 with PlantUMLc4plantumlC4 architecture model using PlantUML syntax
DBMLdbmlDatabase markup language for ER diagrams
DitaaditaaASCII art to diagram conversion
ERDerdEntity-relationship diagrams
TikZtikzLaTeX-based technical drawings
UMletumletUML diagrams
VegavegaDeclarative data visualizations
WireVizwirevizWiring 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

AttributeValuesDescription
renderAsImagetrue, falseRender as image (default: true for diagram languages) or show source code
captionStringFigure caption for auto-numbering in the List of Figures
anchorStringAnchor ID for cross-references
alignleft, center, rightHorizontal alignment
widthNumber (pixels)Width of the rendered diagram image
spacingBeforeNumber (pt)Spacing before the diagram
spacingAfterNumber (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.