How to

How to use PlantUML Preview

A tool for drafting PlantUML syntax and checking the preview in the same workspace. It is useful when you want to review the structure of sequence diagrams or class diagrams. Theme switching and multiple-page management are also available for comparing diagram variations.

Use PlantUML Preview

Use Cases

When to use it

Draft UML diagrams in syntax form
Review the structure before adding diagrams to documentation
Compare multiple diagram variants using tabs
Quickly check a class or state diagram in syntax form
Clean up a UML diagram structure before sharing with the team
Verify how a diagram looks before adding it to a specification

Capabilities

What this tool can do

Check PlantUML syntax and preview side by side
Switch themes
Manage multiple source pages
Save or copy the diagram as SVG or PNG
Manage separate diagrams across multiple pages
Support sequence, class, state, and other major UML types

Guide

How to use each screen area

Learn how to use each screen area, including settings, input, previews, results, and saving.

01 HOWTO

Syntax editor area

Write PlantUML syntax in the left editor. Start from a diagram template, add context-aware insert suggestions, and check the structure in the preview as you edit.

What this area does

Enter PlantUML syntax directly
Insert a starter template for the diagram type
Add suggestions that match the current diagram type
Fix input while checking preview errors

Where to use it

Syntax input

Enter PlantUML syntax for sequence diagrams, class diagrams, state diagrams, and other diagrams.

Template selection

When the editor is empty, choose a diagram type and insert the basic @startuml to @enduml structure.

Input suggestions

Add matching items such as participants, messages, classes, or relationships at the cursor position.

Error review

When the syntax has a problem, use the preview-side message to correct the input.

02 HOWTO

Input suggestions and editor tools

Use the templates and suggestions above the editor, the history control in the top bar, and clear or copy actions in the editor header. This area helps you create a base diagram, add parts, and reuse a draft.

What this area does

Insert a template for the diagram type
Add parts that match the current diagram
Return to a recent editing state from history
Clear or copy the current syntax

Where to use it

Templates

Choose a starter structure for a sequence diagram, class diagram, state diagram, or another diagram type.

Suggestions

Add parts such as participants, messages, classes, or relationships that fit the current syntax.

History and draft

The browser keeps your current draft, and the history menu lets you return to a recent editing state.

Clear input

Remove the current syntax and start a new diagram.

Copy syntax

Copy the draft syntax into a README, specification, or external note.

03 HOWTO

Preview and theme area

Use the right preview pane to confirm the rendered PlantUML diagram and switch the theme before sharing. If rendering fails, the error appears in this same area.

What this area does

Switch the preview theme
Confirm the rendered diagram
Review rendering errors
Return to the input and revise the syntax

Where to use it

Switch theme

Change the background and line colors to match where the diagram will be shared.

Review diagram

Check whether the PlantUML syntax renders into the intended diagram.

Review errors

When the diagram cannot render, read the error message before editing the syntax.

Edit input

Use the preview result as feedback while revising the syntax in the editor.

04 HOWTO

Output format, copy, and download area

Use the output controls above the preview to choose SVG or PNG, then copy or download the rendered diagram. If export is not available, review the error and return to the input.

What this area does

Choose SVG or PNG as the output format
Copy the rendered diagram as an image
Download the rendered diagram as a file
Copy the original PlantUML syntax
Review errors when export is not possible

Where to use it

Output format

Switch between SVG and PNG depending on where you will share or paste the diagram.

Copy image

Copy the rendered diagram in the selected format and paste it into a document or chat.

Download image

Save the rendered diagram as an SVG or PNG file.

Copy syntax

Copy the PlantUML syntax used to create the diagram and share it with the image.

Review errors

When the diagram cannot be exported, check the error and return to the input.

Notes

Important points are grouped with reasons so you can make decisions before using the tool.

Things to check

Start from the smallest syntax that renders

If you add many elements at once, it becomes harder to separate syntax issues from relationship issues. Start small and expand gradually.

Things to check

Choose SVG or PNG based on where you will share it

Use SVG when you want to keep editing quality, and PNG when you want to paste it into chat or slides quickly.

Note

Preview requires a connection to an external server

PlantUML preview needs network access to render diagrams. The preview will not appear without an internet connection.

FAQ

Questions about PlantUML Preview

Questions that make decisions easier before use are summarized first.

How is it different from Mermaid?

It is intended for PlantUML syntax and UML-focused diagram authoring. You can switch between different notation tools by document.

Can I save the result as an image right away?

SVG and PNG actions depend on the preview engine connection. When it is not connected yet, the preview panel shows an error.

What diagram types can I draw?

Sequence diagrams, class diagrams, state diagrams, use-case diagrams, Gantt charts, and other major PlantUML types are supported.

Where can I look up the syntax?

The official PlantUML documentation lists the syntax for each diagram type. You can type syntax and check the result in this page at the same time.

How do I share a diagram as an image?

Download it as SVG or PNG, or copy it to the clipboard and share from there.

Does it work offline?

PlantUML preview requires a connection to an external server. The preview will not appear without network access.

Next guides

Related guides

Related guides are listed next so you can continue without getting lost.

Detailed reference for JSON input, formatting, minifying, validation, result review, and copying by screen area.

View guide

Detailed reference for Mermaid syntax input, editor actions, preview, themes, output, and error review by screen area.

View guide

A screen-area guide for IP, connection, server-observed data, browser, device, permissions, and shareable JSON.

View guide

How to use IP & Network Information Checker

Image Tools Video Tools Text Tools Developer Tools Design Tools Generator Tools

How to use PlantUML Preview

When to use it

What this tool can do

How to use each screen area

Syntax editor area

What this area does

Where to use it

Syntax input

Template selection

Input suggestions

Error review

Input suggestions and editor tools

What this area does

Where to use it

Templates

Suggestions

History and draft

Clear input

Copy syntax

Preview and theme area

What this area does

Where to use it

Switch theme

Review diagram

Review errors

Edit input

Output format, copy, and download area

What this area does

Where to use it

Output format

Copy image

Download image

Copy syntax

Review errors

Notes

Start from the smallest syntax that renders

Choose SVG or PNG based on where you will share it

Preview requires a connection to an external server

Questions about PlantUML Preview

How is it different from Mermaid?

Can I save the result as an image right away?

What diagram types can I draw?

Where can I look up the syntax?

How do I share a diagram as an image?

Does it work offline?

Related guides

How to use JSON Formatter

How to use Mermaid Preview

How to use IP & Network Information Checker