isaaceindhoven / plantuml-styler

Online tool to make your PlantUML diagrams look great.

PlantUML-styler

Edit and style plantUML diagrams right in your browser with instant feedback.

Some key features include:

• Edit and preview your diagram on-the-fly
• Use out-of-the-box themes, or create your own theme visually
• Download your themes and reuse them in future projects
• Use the default plantUML render server, or use your own server.
• And much more...

See the latest version in action on https://plantumlstyler.netlify.app/

Motivation

Created as an internship assignment

Build status

Code style

Why PlantUML-styler

PlantUML-styler makes it possible to generate beautiful diagrams with just the press of a button.

it turns a PlantUML diagram like this one.

Into a beautiful diagram like this!

Tech/framework used

Built with

• Angular

Running PlantUML-styler locally

1. Clone this repository
2. Install the Angular CLI if you haven't already by running npm install -g @angular/[email protected]
3. Run npm install in the repository
4. Run ng serve -o to start a development server at http://localhost:4200

Tests

1. Clone this repository
2. Install the Angular CLI if you haven't already by running npm install -g @angular/cli
3. Run npm install in the repository
4. Run ng test

How does PlantUML-styler work

A step-by-step guide on how to work with PlantUML-styler.

1. Type the PlantUML code in the designated text area

2. Pick a desired theme

3. Edit the styling to make it your own

4. Download your beautiful diagram

Credits

Big thanks to PlantUML for making this project possible

FAQ

• Can I use PlantUML-styler to style UML diagrams of types other than Sequence-diagram? like for example Usecase-diagram?

  • You can certainly try. As per the 6th of Januari 2020 this isn't really supported. Although some diagrams may work, we can't say for certain it works well. If there is functionality for different UML types that you really want to use, Add it yourself! every bit of help is highly appreciated.

• Is there an easy way to share these diagrams?

  • There is! Just press the download button

    

    This will give you a ".zip" file, this file contains png's and every bit of information needed to import it into PlantUML-styler.

    Either press the

    

    or the

    

    button and select the downloaded ".zip" file. This will open the exact diagram you downloaded and you can change anything you want!

• How do I change the environment variables like the default server?

  • there is a file called environment.prod.ts change the base to whatever server you want, this will set it as default

License

MIT © ISAAC and/or its affiliates

plantuml-styler's Issues

Add CLI mode to output a diagram as an image

Hello! It would be great if someone adds the CLI mode to pass the parameters: theme, .puml file, etc. And as a result the diagram would be created as a PNG image, for instance.

Thank you!

Not able to get dashed lines working

Allow disable style overwriting

While the themes are useful, they limit seeing the original code.
It would be great to have a way to disable it and show exactly what the colors are set in the code as is.

actual

expected

code to reproduce

@startmindmap Tools

*[#000000] <color:#FFFFFF><&infinity> ChromeBook

** Collaboration
***_ <b>Gmail Workspace</b> \n<i>(Voice, Chat, \n<i>Meet, \n<i>Email, Calendar, Tasks, Keep, \n<i>Drive, Docs, Sheets, Slides, Forms, Drawing, Sites, \n<i>Tables, DataStudio)

** Phone
***_ Google Voice
***_ <strike><color:#B71C1C>Zoom</strike>

** Chat
***_ Google Chat
***_ <strike><color:#B71C1C>Microsoft Teams</strike>
***_ <strike><color:#B71C1C>Slack</strike>

** Remote support
***_ Google Remote Desktop
***_ Microsoft Remote Desktop
***_ <strike><color:#B71C1C>TeamViewer</strike>

** Cloud
***[#1B5E20] <color:#E8F5E9>Google Cloud
***[#0D47A1] <color:#E3F2FD>Microsoft Azure

** Screen-Capture
***[#F44336] <color:#FFEBEE>TechSmith Snag-it

** Async meeting
***[#F44336] <color:#FFEBEE>TechSmith Snag-it
***[#FDD835] <color:#212121>Loom

** eSign and Document archiving
***_ Adobe PDF Pro

** Ticketing
***_ Zendesk
***_ Kayako

@endmindmap

The edit pane does not allow the user to scroll down when the input is larger than the pane.