Skip to content

Latest commit

 

History

History
99 lines (65 loc) · 4.15 KB

README.md

File metadata and controls

99 lines (65 loc) · 4.15 KB
Raw

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/

example

Motivation

Created as an internship assignment

Build status

Netlify Status

Code style

eslint-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.

PlantUML diagram

Into a beautiful diagram like this!

StyleUML diagram

Tech/framework used

Built with

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

karma

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

textarea

  1. Pick a desired theme

themes

  1. Edit the styling to make it your own

edit

  1. Download your beautiful diagram

download

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

      download

      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

      plus

      or the

      import json

      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