Mr. Tools

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
PlantUML Preview thumbnailPlantUML Preview thumbnail
Steps
2 steps
Guide
With screenshots
Content
Notes and FAQ

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

Steps

Steps

The order of operations and checkpoints are listed so you can proceed while looking at the screen.

STEP 1

Enter PlantUML syntax

Write PlantUML syntax in the left editor. You can also add pages and manage multiple drafts in parallel.

A capture showing the input area in PlantUML PreviewA mobile capture showing the input area in PlantUML Preview

Checkpoints

  • PlantUML syntax appears in the editor
  • You can add pages and separate drafts

Actions on this screen

01
Enter PlantUML syntax

Type sequence or class diagram syntax directly and send it to the preview.

A view showing the PlantUML input areaA mobile view showing the PlantUML input area
02
Clear the input

Clear the current PlantUML text and start again from a smaller example.

A view showing the clear action in PlantUML PreviewA mobile view showing the clear action in PlantUML Preview
03
Copy the syntax

Copy the current PlantUML syntax and paste it into notes or documentation.

A view showing the copy action in PlantUML PreviewA mobile view showing the copy action in PlantUML Preview

STEP 2

Review the theme and output

Check the preview on the right, switch themes, and use SVG or PNG actions depending on how you plan to share the result.

A capture showing the preview area in PlantUML PreviewA mobile capture showing the preview area in PlantUML Preview

Checkpoints

  • A PlantUML diagram or an error appears on the right
  • Theme switching is available
  • SVG and PNG actions are available

Actions on this screen

01
Switch themes

Check how the background and line colors look in a theme close to the final destination.

A view showing the theme selector in PlantUML PreviewA mobile view showing the theme selector in PlantUML Preview
02
Review the diagram

Inspect the rendered result and decide whether SVG reuse is appropriate.

A view showing the PlantUML rendered previewA mobile view showing the PlantUML rendered preview
03
Review errors

If the syntax or server response fails, you can review the error message in the preview area and correct it.

A view showing the PlantUML error stateA mobile view showing the PlantUML error state

Notes

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.

How to use JSON Formatter

This guide explains how to paste JSON, format it, validate the structure, and copy the result.

View guide
How to use JSON Formatter

How to use Mermaid Preview

This guide explains how to enter Mermaid syntax and review the diagram and errors as you work.

View guide
How to use Mermaid Preview

How to use IP & Network Information Checker

This guide explains how to review the current connection environment, browser, device, and server-observed information in order.

View guide
How to use IP & Network Information Checker
Image ToolsVideo ToolsText ToolsDeveloper ToolsDesign ToolsGenerator Tools