marcelofpfelix / plantuml-diagrams

PlantUML diagrams and skins

plantuml-diagrams

PlantUML diagrams.

How to use

Use the PlantUML proxy service as described in this stackoverflow discussion to display PlantUML diagrams in github markdown. Instead of passing diagram content within the URL,define a remote URL where the content can be fetched from, as e.g. in a repo.

This URL can be embedded in an HTML <img> tag or a Markdown image syntax ![](). To leverage this feature when using GitHub, simply point the remote URL to a raw link of the PlantUML diagram in your repository.

• Adding a ?cache=no might be a good idea because GitHubs caching will prevent your images from updating, if you change the sourcecode.
• The &fmt=svg can be used to change the format

The following diagram shows what will happen when you open a Markdown page hosted on GitHub that contains such a link:

![example1](http://www.plantuml.com/plantuml/proxy?cache=no&fmt=svg&src=https://raw.githubusercontent.com/marcelofpfelix/plantuml-diagrams/master/example/example1.puml)

![example1_clear](http://www.plantuml.com/plantuml/proxy?cache=no&fmt=svg&src=https://raw.githubusercontent.com/marcelofpfelix/plantuml-diagrams/master/example/example1_clear.puml)

![example1_dark](http://www.plantuml.com/plantuml/proxy?cache=no&fmt=svg&src=https://raw.githubusercontent.com/marcelofpfelix/plantuml-diagrams/master/example/example1_dark.puml)

skin

You can use a link to choose a skin:

@startuml
!includeurl https://raw.githubusercontent.com/marcelofpfelix/plantuml-diagrams/master/skins/skin_clear.puml

(...)
@enduml

Demo

• default:

• clear:

• dark:

Alternatives

• mermaid.js, not avalailable on github markdown
• draw.io

Resources

• anoff.io
• https://www.planttext.com/
• https://plantuml-documentation.readthedocs.io/