WASM build

[fabiospampinato]

I'd really like to run PlantUML via a more web-compatible format, so that I can ship it with my Electron app and the PlantUML-related features can work much faster and without the need of a server (which I currently also need to maintain). This could also be useful for Node server-side apps, currently I have a dependency on Java because of PlantUML which I'd like to remove if it all possible.

Somewhat related it would be useful to have a "slim" version of PlantUML as well, currently I'm seeing the jar contains things like CodeMirror, which when PlantUML is used for the CLI only are just not needed.

[fabiospampinato]

Somewhat related it would be useful to have a "slim" version of PlantUML as well, currently I'm seeing the jar contains things like CodeMirror, which when PlantUML is used for the CLI only are just not needed.

That already exists: https://plantuml.com/picoweb

[fabiospampinato]

Alternatively a way to run the Java implementation in the browser, even if it came with massive overheads, would be very useful for my use case.

[sakirtemel]

I see something like this, I'm wondering if it would be possible to use? https://github.com/konsoletyper/teavm

Definitely, PlantUML should be able to run on the browser, it has great set of features and people should be able to integrate it easier without needing a backend

[arnaudroques]

Running PlantUML on the browser would indeed be great.

Many options are possible. We made some tests with Haxe (see https://plantuml.com/en/haxe-demo-javascript ) but unfortunately this means rewritting all the existing code (which is quite large) in a new language (Haxe), and we don't have the time for this.

As you said, some other options are:

• https://leaningtech.com/cheerpj/
• https://github.com/konsoletyper/teavm
• https://www.jsweet.org/

Maybe those would be easier to set up, since they are Java based. However, we still run out of time so we need some help here: that is, someone which would set up a minimal working example that would be a starting point for us.

This minimal example should:

1. Parse a simple regex. For example: activity ([\w]+)
2. Output a simple svg diagram <text x="0" y="0">\1</text>

So when given activity helloworld, this minimal example would output: <svg><text x="0" y="0">helloworld</text></svg>

This sounds pretty simple and having this would be great for us :-)

Any volunteers?

[sakirtemel]

Hi @arnaudroques , thank you for a quick reply! Haxe demo and overall the interest are exciting!

I just give cheerpj to try, successfully compiled jar into js, run "-help" on the browser, and then passed an input file, expected an output file in IndexedDB, all worked~~ but generated some sort of an empty response in the file ( base64: W29iamVjdCBCbG9iXQ==).~~ My bad, I just needed to read the blob.

Now I'm troubleshooting. If it works, I'll try doing an example page like haxe demo page. Perhaps I may also try running picoweb on the browser later on.

[arnaudroques]

Wait... do you mean that the actual plantuml.jar file does compile into js ???

[sakirtemel]

@arnaudroques I don't know how exactly it works, seems like it also requires the jar file, nevertheless, works! :)

https://plantuml-wasm.pages.dev/

https://github.com/sakirtemel/plantuml-wasm

[sakirtemel]

I also added the dependencies, it normally works without them but complains in console log

https://github.com/sakirtemel/plantuml-wasm/commit/79fa477839165701d3bb2473d9735c87e531d7fb

[arnaudroques]

This is magic :-)

It even works using smetana layout engine!

@startuml
!pragma layout smetana
class Foo1

Foo1 --> Foo2
Foo1 --> Foo3
Foo1 ---> Foo4 : test 4
Foo1 ----> Foo5 : test 5
@enduml

We have to find a way to detect from the Java code if we are running in JS to enable smetana layout by default in that case.

[sakirtemel]

We have to find a way to detect from the Java code if we are running in JS to enable smetana layout by default in that case.

done :) : https://github.com/sakirtemel/plantuml-wasm/commit/3bd8fccdcc4df5ef6f24b3a7067585b5c253405c

[arnaudroques]

...and the diagram should not be updated for every keystroke: you should probably add a short delay (400ms?)

BTW, this is really a huge step, congratulation!

[sakirtemel]

added debounce @arnaudroques

BTW, this is really a huge step, congratulation!

thanks, indeed! I'm surprized and happy to contribute to such beloved project, feels right! :)) also thanks @fabiospampinato and all the others who liked his comment, and cheerpj all of the efforts lead into this wasm solution

a couple of things left imo:

• stabilize it

• svg render by default and export as png (probably will be faster)

• compile every dependency jar into jar.js with cheerpj

• offline loader cheerpj

• editor autocomplete/syntax highlighting for plantuml

• saving the last state of editor content in browser

• add CI not requiring java, render with nodejs (it can be extremely helpful for projects to adopt plantuml faster)

• preload the dependencies for faster startup

• try teavm, seems like a well supported project, and we may reduce the need of sending jars

• use gh-pages if possible <- I worked on it, not sure sending the jar.js files in assets folder can work with cheerpj

anything else?

[arnaudroques]

On our side:

• create some net.sourceforge.plantuml.wasm package and a JsUtils class with some static methods to avoid calling Main directly. One first method would take as input an Array of String and would output an PNG image. Another method would also take as input an Array of String but would output a SVG image.
• Understand which parts of the Java code are slow in JS and try to optimize it
• Import files from theme and standard library so that it could be used as well from JS: should we open an issue ?
• create/clone plantuml-wasm in the official organization and give you full access to it. People will definitively use it. To me, this is the missing part that would allow the native use of PlantUML diagrams with any GitHub project like for Mermaid :-)

[sakirtemel]

Import files from theme and standard library so that it could be used as well from JS: should we open an issue ?

themes actually work, is that possible that it's built-in jar?

I couldn't make the stdlib work yet, I'll work on that.

create/clone plantuml-wasm in the official organization and give you full access to it. People will definitively use it. To me, this is the missing part that would allow the native use of PlantUML diagrams with any GitHub project like for Mermaid :-)

exactly! PlantUML is really comprehensive and nothing can come closer to it. imo, when people will see it, they will be challenging PlantUML to support even more UML definitions (at least I'd do) :) now I'm working on a project "on the top of plantuml-wasm" to draw ER diagrams, it's so good! :)

[arnaudroques]

themes actually work, is that possible that it's built-in jar?

Yes, the files are in the built-in jar.

I couldn't make the stdlib work yet, I'll work on that.

Maybe we can keep that for latter.

Stdlib files are compressed using brotli algo and we have included a Java implementation of brotli. Running this in JS is maybe too much: we could think about a different integration of Stdlib files for JS.

[sakirtemel]

Ok, it's ready 🎉

https://github.com/plantuml/plantuml-wasm

https://plantuml.github.io/plantuml-wasm/

Also added a new functionality to load from examples. Examples are inside the examples folder and can be selected on the browser side. Added a link for people to share their PlantUMLs, so that more industry scenarios also can be included.

What do you think?

[fabiospampinato]

@sakirtemel Amazing! Thank you so much for this. Would it be possible to have this working from a single .js file? It would be easier to integrate into other programs (like a purely offline vscode extension).

[sakirtemel]

Added all the issues mentioned here to the new repository: https://github.com/plantuml/plantuml-wasm/issues

Perhaps we can close this issue now? :)

[sakirtemel]

@sakirtemel Amazing! Thank you so much for this. Would it be possible to have this working from a single .js file? It would be easier to integrate into other programs (like a purely offline vscode extension).

@fabiospampinato let's move the discussion to here https://github.com/plantuml/plantuml-wasm/issues/11 . It can be helpful to think it through there specifically