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/cli@9.1.12
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