plantuml/plantuml.js

PlantUML that runs completely on javascript without needing java/servers

🌱 PlantUML

Generate UML diagrams from textual descriptions.

ℹ️ About

PlantUML is a component that allows you to create various UML diagrams through simple textual descriptions. From sequence diagrams to deployment diagrams and beyond, PlantUML provides an easy way to create visual representations of complex systems.

🗃️ Supported Diagram Types

• 🧩 UML Diagrams
  • Sequence diagram
  • Use case diagram
  • Class diagram
  • Object diagram
  • Activity diagram
    • Legacy syntax
  • Component diagram
  • Deployment diagram
  • State diagram
  • Timing diagram
• 📈 Non-UML Diagrams
  • JSON data
  • YAML data
  • EBNF (Extended Backus-Naur Form)
  • Regex (Regular Expression)
  • Network diagram (nwdiag)
  • Salt (Wireframe graphical interface or UI Mockups)
  • Archimate diagram
  • SDL (Specification and Description Language)
  • Ditaa diagram
  • Gantt diagram
  • Chronology diagram
  • MindMap diagram
  • WBS (Work Breakdown Structure)
  • Mathematical Notations (AsciiMath, JLaTeXMath)
  • Entity Relationship (ER) diagram
    • Information Engineering (IE) diagram
    • Entity Relationship (ER) diagram (Chen's notation)

📣 Additional Features

• Hyperlinks and tooltips
• Rich text (Creole) with emoticons, unicode, and icons
• OpenIconic icons
• Sprite icons

📖 Learn More

For a more detailed overview, visit PlantUML Official Website.

🛡 Security

See Security Policy and Security overview.

Important

PlantUML is not affected by the log4j vulnerability.

🚀 Getting Started

Whether you're looking to use PlantUML as a standalone application or as a component in your own project, getting started is simple. Check out the official PlantUML setup guide for instructions on how to set up PlantUML on your system.

⚙️ Building from Source

To build PlantUML from source, you'll need to have certain prerequisites installed and follow a series of steps outlined in our build guide. Find detailed instructions in our BUILDING.md file.

🧱 Contributing

PlantUML is an open-source project, and we welcome contributions of all kinds. Whether you're helping us fix bugs, improve the docs, or spread the word, we appreciate your support. See our contributing guide for more information on how to get started.

For comprehensive and detailed documentation on using PlantUML, refer to the official Javadoc, available here. Please note that this documentation is a work in progress and may not be complete.

🧑‍🤝‍🧑 Support and Community

• GitHub issues
• Community Forum

📃 License

PlantUML is licensed under several licenses; you can choose the one that suits you best:

• GPL license
• LGPL license
• Apache license
• Eclipse Public license
• MIT license

For more information, please refer to the PlantUML license FAQ to help determine which license is appropriate for your use case.

plantuml.js's Issues

ACE editor PlantUML configuration

• Syntax highlighting
• Autocomplete

Confluence plugin

Render SVG as default and add export to png(+svg) as a button

It should be speeding up rendering.

Q/Report: Teoz not working?

Hello!
Very interesting project!! So cool!

I immediately tried one of my recent diagrams and ran into some trouble, however.
First, it was veeerrry slooooowwww to render after a paste (say 90 loc). But after that, when done - it was like a skeleton, all the messages missing!
So, I started to see what could be wrong.... after a short while I found a:

Problem: teoz renderer is not working

So, this simple diagram will not render as intended:

@startuml
!pragma teoz true

a->b: foo
& b->c: bar
@enduml

Expected:

(from: https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000)

Actual:

This may be a known issue - so I searched but could not find any mention of teoz.
So here is one reporting this!

Thanks again!

Embed docs in editor

Maybe a layout like this: https://play.tailwindcss.com/ , docs will be open from the bottom. We should be able to search quickly, get the responses with images and the code, perhaps under accordions. It should speed up writing significantly. Also we may make the code in editor clickable, so it can easily show the definition.

Save the last state of editor content in browser

if people accidentally close the tab, they shouldn't be losing their content. additionally we can add local storage drafts for multiple files

Write guideline how to use the wasm version in projects

People should be able to embed plantuml into their tools

Skinparam FontColor for package is ignored

JS version does not respect packageFontColor and packageStereotypeFontColor (both still could be seen)

https://plantuml.github.io/plantuml-core/raw.html?ROun3i8m34NtdC8ZY2jKbKgbJWmCNC1DJ5KLuiXnXWZbxeIA2J9uUUzP-d5RVK319mIq6oxKTHVCdBJluMK0PXP7ClA31Mw2FjQOl7vCxHVXv5tBJkornQEI46iEr2wACTyXWF2pPVNr-OwMO9YZ2bgTwh7atPvW54Abgx1BLeV3yH-UTrXCUGC0

@startuml
skinparam package<<Layout>> {
  borderColor Transparent
  backgroundColor Transparent
  FontColor Transparent
  stereotypeFontColor Transparent
}

package a <<Layout>> {
  interface AbstractFactory {
  + CreateProductA()
  + CreateProductB()
  }
}
@enduml

Expected:
None of package elements are visible
Actual:
Package name and stereotype are visible

Use cheerpjCreateDisplay

The actual behavior not very efficient:

1. A graphic is created "in memory" in Java/JS
2. It is then compressed in PNG in Java/JS in "result.png"
3. "result.png" is finally uncompressed in JS to be displayed

Fortunately, it could be possible to use cheerpjCreateDisplay.
I've created a branch where this cheerpjCreateDisplay function is called.

My understanding is that it create a Canvas in the HTML page.
Right now, a simple blue rectangle is drawn in Java, but in the future, we could draw the real diagram.
(See the demo!)

@sakirtemel could you remove the actual drawing (we won't need it any more) and rearrange the Canvas position (which is below content) to that it is displayed on the left? (By working on the branch panel2, it's not ready to be merged at all!)
Thanks!

ACE editor worker javascript issue

It's good to have the console log clean, couldn't find an easy solution

Self hosting guidelines

It can be helpful for the enterprises mainly, we should explain how to clone this repository, how to run it, how team members' can use it

Improve plantuml-docs

• fix: page title is Untitled for every page
• add: edit link should take to the dokuwiki
• add: nav pages from page title when not defined
• add: modify topnav for better navigation
• add: logo and favicon
• add: better styling/fonts
• improve: optimize search, do not include the code
• imrpove: algolia?
• add: sitemap
• add: cmd k
• add: popup in other page, it will be useful forwasm
• improve: make the directive of plantuml better/more asciidocc
• imrove: plantuml source block, right now it's not written
• add: use local nodejs/plantuml-wasm
• add: add docs to platuml-wasm
• fix: warnings and errors during build
• improve: plantuml extension to render better
• fix: general issues
• fix: define navigation
• add: resolving encoded string in plantuml-wasm
• improve: use static html github workflow(also apply it to wasm)
• fix: link directive
• fix: Extra part shouldn't be nested under Extra

later

• improve: open UML diagrams by default on nav
• improve: tooltips with screenshots in navbar?

Remove some data from jar file

To improve startup time, we propose to move outside of the jar file some resources that are not necessary needed
(as we did for stdlib)

So we would move data files away from:

• emoji
• openiconic
• theme

So inside plantuml-wasm folder , we would create:

• https://github.com/plantuml/plantuml-wasm/tree/main/plantuml-wasm/emoji
• https://github.com/plantuml/plantuml-wasm/tree/main/plantuml-wasm/openiconic
• https://github.com/plantuml/plantuml-wasm/tree/main/plantuml-wasm/themes

We would also change initialization from:

await cheerpjRunMain("com.plantuml.wasm.RunInit", `${cheerpjPath}/plantuml-wasm.jar`, `${cheerpjPath}/stdlib/`)

to:

await cheerpjRunMain("com.plantuml.wasm.RunInit", `${cheerpjPath}/plantuml-wasm.jar`, `${cheerpjPath}/`)

@sakirtemel Does it sound good to you? We'll do the change if you agree on this.

Add CI not requiring java, render with nodejs

It can be extremely helpful for projects to adopt plantuml faster

We can also test that by pre-rendering the diagrams in examples(maybe a set of them?) into this repository

Optimize loading time by analyzing the codebase and dependencies

plantuml/plantuml#803 (comment)

AWSPuml does not seem to work

This doesn't seem to work - https://github.com/awslabs/aws-icons-for-plantuml

@startuml Basic Usage - AWS IoT Rules Engine

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v15.0/dist
!include AWSPuml/AWSCommon.puml
!include AWSPuml/InternetOfThings/IoTRule.puml
!include AWSPuml/Analytics/KinesisDataStreams.puml
!include AWSPuml/ApplicationIntegration/SimpleQueueService.puml

left to right direction

agent "Published Event" as event #fff

IoTRule(iotRule, "Action Error Rule", "error if Kinesis fails")
KinesisDataStreams(eventStream, "IoT Events", "2 shards")
SimpleQueueService(errorQueue, "Rule Error Queue", "failed Rule actions")

event --> iotRule : JSON message
iotRule --> eventStream : messages
iotRule --> errorQueue : Failed action message

@enduml

What about math?

What about equations and other optional functionality?

Add example diagrams

Maybe we can fetch them directly from the docs?

Display error message

Right now, error message are hidden when the user gives incorrect data.
This is fine somehow because it does not break the last working diagram display.

On the other hand, displaying the error message may help the user to understand what is going on.

What about displaying the generated error message in some area which is normally hidden (for example, on the bottom of the screen).
This area will be hidden back automatically when user's input will be correct.

VSCode Extension

Preload the dependencies for faster startup

Cheerpj suggests declaring preloaded assets can speed up the startup time significantly

https://docs.leaningtech.com/cheerpj/Startup-time-optimization

Use branch name when publish

Would it be possible to use branch name when publishing the demo ?

This way https://plantuml.github.io/plantuml-wasm/ would become https://plantuml.github.io/plantuml-wasm/main/

The interest is that we will be able to work on a different branch when developping (let's say develop).

So we could test the result here https://plantuml.github.io/plantuml-wasm/develop/

Once it will work on the branch, we will merge it into main.

This way https://plantuml.github.io/plantuml-wasm/main/ will always be working.

Since we would like to make an official announcement, we must provide something always on for users.
I'm sure it will make some noise :-)

@sakirtemel Could we put your name in this future announcement, you definitively deserve a huge kudos !

Issue with examples

Hello,

when trying to run the examples i get the following error.

Unresolved directive in <stdin> - include::http://localhost:8080/sequence-diagram.adoc[]

The steps i did are

cd examples/
cd 02-asciidoctor.js/
npm i
npm start

can you please assist me here.

Thanks!

Try teavm

Seems like a well supported project, and we may reduce the need of sending jars

State Diagram - sub states example not correct

[*] -> State1
State1 --> State2 : Succeeded
State1 --> [*] : Aborted
State2 --> State3 : Succeeded
State2 --> [*] : Aborted
state State3 {
  state "Accumulate Enough Data\nLong State Name" as long1
  long1 : Just a test
  [*] --> long1
  long1 --> long1 : New Data
  long1 --> ProcessData : Enough Data
}
State3 --> State3 : Failed
State3 --> [*] : Succeeded / Save Result
State3 --> [*] : Aborted

Expected

https://plantuml.com/state-diagram

https://plantuml.com/imgw/img-494c143caf3638f83ec9af6d5dbb653e.png

Actual

Make right panel zoomable

When the diagrams are large enough, the layout does not look good. We should wrap the right panel, so that it can be fixed size and zoomable

Move stdlib files somewhere else

Right now, files are under root.
And this is hard coded in Java/JS here

I suggest that me make this configurable by adding an argument in the main() function during init

Some we change this line into something like

await cheerpjRunMain("net.sourceforge.plantuml.wasm.RunEmpty", ${cheerpjPath}/plantuml-wasm.jar, "/app/plantuml-wasm/stdlib/")

This way, this will be more flexible.

Add stdlibs from PlantUML

plantuml/plantuml#803 (comment)

We should find a way for such content to work:

@startuml
!include <awslib/AWSCommon>
!include <awslib/InternetOfThings/IoTRule>
!include <awslib/Analytics/KinesisDataStreams>
!include <awslib/ApplicationIntegration/SimpleQueueService>

left to right direction

agent "Published Event" as event #fff

IoTRule(iotRule, "Action Error Rule", "error if Kinesis fails")
KinesisDataStreams(eventStream, "IoT Events", "2 shards")
SimpleQueueService(errorQueue, "Rule Error Queue", "failed Rule actions")

event --> iotRule : JSON message
iotRule --> eventStream : messages
iotRule --> errorQueue : Failed action message
@enduml