Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/isaaceindhoven/plantuml-styler

Online tool to make your PlantUML diagrams look great.
https://github.com/isaaceindhoven/plantuml-styler

angular8 css isaac isaac-eindhoven isaaceindhoven open-source opensource plantuml plantuml-editor plantuml-helper plantuml-styler sequence-diagram tool uml uml-diagram uml-diagrams uml-sequence-diagram

Last synced: 7 days ago
JSON representation

Online tool to make your PlantUML diagrams look great.

Host: GitHub
URL: https://github.com/isaaceindhoven/plantuml-styler
Owner: isaaceindhoven
License: other
Created: 2020-01-06T09:55:47.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2022-06-03T01:07:58.000Z (over 2 years ago)
Last Synced: 2024-08-02T16:42:22.312Z (3 months ago)
Topics: angular8, css, isaac, isaac-eindhoven, isaaceindhoven, open-source, opensource, plantuml, plantuml-editor, plantuml-helper, plantuml-styler, sequence-diagram, tool, uml, uml-diagram, uml-diagrams, uml-sequence-diagram
Language: JavaScript
Size: 1.54 MB
Stars: 66
Watchers: 8
Forks: 6
Open Issues: 7
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 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](https://github.com/isaaceindhoven/plantuml-styler/blob/master/Readme_Assets/example.png)

## Motivation
Created as an internship assignment

## Build status
[![Netlify Status](https://api.netlify.com/api/v1/badges/9865bac2-1f35-45f2-b804-46108e7fc7c8/deploy-status)](https://app.netlify.com/sites/plantumlstyler/deploys)

## Code style
[![eslint-style](https://img.shields.io/badge/code%20style-eslint-brightgreen.svg?style=flat)](https://github.com/palantir/tslint)

## 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](https://github.com/isaaceindhoven/plantuml-styler/blob/master/Readme_Assets/plantuml.png)

Into a beautiful diagram like this!

![StyleUML diagram](https://github.com/isaaceindhoven/plantuml-styler/blob/master/Readme_Assets/styleuml.png)

## Tech/framework used
Built with
- [Angular](https://angular.io/)

## 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`

![karma](https://github.com/isaaceindhoven/plantuml-styler/blob/master/Readme_Assets/karma.png)

## 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](https://github.com/isaaceindhoven/plantuml-styler/blob/master/Readme_Assets/textarea.png)

2. Pick a desired theme

![themes](https://github.com/isaaceindhoven/plantuml-styler/blob/master/Readme_Assets/themes.png)

3. Edit the styling to make it your own

![edit](https://github.com/isaaceindhoven/plantuml-styler/blob/master/Readme_Assets/edit.png)

4. Download your beautiful diagram

![download](https://github.com/isaaceindhoven/plantuml-styler/blob/master/Readme_Assets/download.png)

## Credits
Big thanks to [PlantUML](https://plantuml.com/) 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](https://github.com/isaaceindhoven/plantuml-styler/blob/master/Readme_Assets/download.png)

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](https://github.com/isaaceindhoven/plantuml-styler/blob/master/Readme_Assets/Plus.png)

or the

![import json](https://github.com/isaaceindhoven/plantuml-styler/blob/master/Readme_Assets/ImportJSON.png)

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](https://github.com/isaaceindhoven/plantuml-styler/blob/master/src/environments/environment.prod.ts) change the base to whatever server you want, this will set it as default