Diagramming AI

PlantUML Editor

Introduction to PlantUML Diagrams

PlantUML is a versatile tool for creating various diagrams quickly and easily using a simple, intuitive language. It supports UML diagrams like sequence, use case, class, object, activity, component, deployment, state, and timing diagrams. Beyond UML, PlantUML can generate JSON, YAML, EBNF, regex, network, UI mockups, Archimate, SDL, ditaa, Gantt, chronology, MindMap, WBS, IE, and ER diagrams. It offers features like hyperlinks, tooltips, rich text formatting, and mathematical notations. Export diagrams in PNG, SVG, LaTeX, and ASCII art formats.

PlantUML Editor (Diagramming AI)

To use PlantUML in Diagramming AI, switch the diagram language button from "Mermaid" to "PlantUML" in the diagram rendering area.

Projects

Code

By switching to the "Code" tab, you can edit PlantUML code. The diagram will be rendered immediately after editing.

The @start... patterns include the following options. The templates feature in Diagramming AI allows you to select and generate diagrams using AI:

  • @startuml ... @enduml - UML Diagrams: Includes sequence diagrams, class diagrams, object diagrams, activity diagrams, use case diagrams, component diagrams, deployment diagrams, state diagrams, timing diagrams, etc.
  • @startgantt ... @endgantt - Gantt Charts: Used for project management and scheduling.
  • @startmindmap ... @endmindmap - Mind Maps: Used for organizing ideas and planning.
  • @startwbs ... @endwbs - Work Breakdown Structure (WBS) Diagrams: Visualize the task structure of a project.
  • @startjson ... @endjson - JSON Data Visualization: Represent JSON data as diagrams.
  • @startyaml ... @endyaml - YAML Data Visualization: Represent YAML data as diagrams.
  • @startebnf ... @endebnf - EBNF Diagrams: Generate diagrams using Extended Backus-Naur Form.
  • @startregex ... @endregex - Regular Expression Diagrams: Visualize regular expressions.
  • @startsalt ... @endsalt - UI Mockups: Create user interface mockups.
  • @startmath ... @endmath, @startlatex ... @endlatex - Mathematical Diagrams: Use AsciiMath or JLaTeXMath notation for mathematical symbols.

Quick Edit Feature

Projects

In Diagramming AI, you can use the Quick Edit feature in the PlantUML Editor to instantly apply various diagram adjustments from a modal screen. This feature allows you to quickly customize aspects of your diagram without manually editing the code. Here are the available settings:

Monochrome: Toggles monochrome coloring for the diagram, creating a simpler, single-color look. Available options are "None," "True," and "Reverse."

Shadowing: Adds or removes shadow effects on diagram elements, enhancing depth. Options include "None" and "True."

Pragma Layout: Controls the layout algorithm used for arranging elements in the diagram. Options include "None," "smetana," and "elk." Note that this setting is not available for sequence and activity diagrams.

Direction: Sets the layout direction of the diagram, either from left to right or top to bottom, helping with flow alignment. Available options are "None," "Left to Right," and "Top to Bottom." This setting cannot be used in sequence and activity diagrams.

Use Vertical If: Adjusts the layout of conditional branches in activity diagrams to a vertical arrangement. This setting is only applicable to activity diagrams and has options of "None" and "On."

Component Style: Sets the visual style of components in the diagram. Available styles include "None," "Rectangle," "UML1," and "UML2."

Linetype: Changes the line style in the diagram, allowing different types of connections. Options are "None," "Polyline," and "Ortho."

Node Separation: Controls the horizontal spacing between nodes, adjustable between 0 and 300. This slider helps refine the visual clarity of connected nodes.

Rank Separation: Adjusts the vertical spacing between hierarchical ranks, with values ranging from 0 to 300, allowing better organization in diagrams with multiple layers.

The Quick Edit feature is continuously updated, making it easier and faster to modify PlantUML diagrams with just a few clicks, optimizing your workflow and diagram customization.

Theme

Projects

In Diagramming AI, you can easily switch between color themes for PlantUML. The following themes are available by default with the corresponding commands.

none
amiga
aws-orange
black-knight
bluegray
blueprint
carbon-gray
cerulean
cerulean-outline
cloudscape-design
crt-amber
crt-green
cyborg
cyborg-outline
hacker
lightgray
mars
materia
materia-outline
metal
mimeograph
minty
mono
plain
reddress-darkblue
reddress-darkgreen
reddress-darkorange
reddress-darkred
reddress-lightblue
reddress-lightgreen
reddress-lightorange
reddress-lightred
sandstone
silver
sketchy
sketchy-outline
spacelab
spacelab-white
superhero
superhero-outline
toy
united
vibrant