Markdown PlantUML editor

Write PlantUML and see it drawn as you type. This is PlantUML itself, the project's own WebAssembly build with Graphviz for the layout, running in your browser, so there is no PlantUML server and nothing you type leaves your computer. The text sits in your Markdown as a ```plantuml block. Free, no sign-up.

The first diagram loads PlantUML, about 6 MB, and takes a few seconds. It needs a recent browser: Chrome 119, Firefox 120 or Safari 18.2 and later.

PlantUML syntax

A diagram sits between @startuml and @enduml; a block without them is read as if they were there. PlantUML works out the kind of diagram from what you write, and other kinds start with their own line, such as @startmindmap or @startgantt. Lines starting with ' are comments.

Sequence diagram

Write one message per line with ->, and --> for a dashed reply. Declare participants first to choose their shape and order.

You write

@startuml
actor User
participant App
database DB
User -> App : log in
App -> DB : check password
DB --> App : ok
App --> User : welcome
@enduml

You get

Class diagram

List classes with their fields and methods in braces, then the relationships between them.

You write

@startuml
class Order {
  +id : int
  +total() : decimal
}
class Line {
  +qty : int
}
abstract class Payment
class Card
Order "1" *-- "many" Line
Order --> Payment
Payment <|-- Card
@enduml

You get

Activity diagram

Steps go between : and ;, with if, while and fork for branches.

You write

@startuml
start
:Receive order;
if (In stock?) then (yes)
  :Pack;
  :Ship;
else (no)
  :Order from supplier;
endif
stop
@enduml

You get

Mind map

Start with @startmindmap and use stars for the levels.

You write

@startmindmap
* Holiday
** Travel
*** Flights
*** Trains
** Stay
*** Hotel
@endmindmap

You get

C4 with the standard library

The bundled standard library adds whole diagram vocabularies. !include <C4/C4_Container> loads the C4 model shapes.

You write

@startuml
!include <C4/C4_Container>
Person(user, "Customer")
System_Boundary(shop, "Shop") {
  Container(web, "Web app", "React")
  ContainerDb(db, "Database", "PostgreSQL")
}
Rel(user, web, "Uses")
Rel(web, db, "Reads and writes")
@enduml

You get

Cheat sheet

Write this	You get
`A -> B : text`	A message in a sequence diagram
`A --> B`	A dashed reply
`actor`, `participant`, `database`	Participant shapes
`class A { +x : int }`	A class with a field
`A <\|-- B`, `A *-- B`, `A o-- B`	Inheritance, composition, aggregation
`start`, `:step;`, `stop`	An activity diagram
`if (q?) then (yes) … else (no) … endif`	A decision
`usecase`, `component`, `node`, `state`	Use case, component, deployment and state diagrams
`@startmindmap`, `@startgantt`, `@startwbs`, `@startjson`	Other diagram kinds
`note right of A : text`	A note
`!theme cerulean`, `skinparam`	A built-in theme or your own styling
`!include <C4/C4_Container>`	A standard library

Included standard libraries: C4, Azure, ArchiMate, CloudInsight, Domain Story, EIP and Bootstrap icons, plus OpenIconic and emoji. Not available here: maths and LaTeX diagrams, @startditaa (use the ditaa editor), @startnwdiag (use the nwdiag editor), the AWS, Kubernetes, Google Cloud and other icon libraries, includes from files or web addresses, and drawings after the first in one block.

Something not working? Let us know.