-
Configure docsify-plantuml (optional):
<script> window.$docsify = { plantuml: { skin: 'default', }, } </script>
See Options for more details.
-
Insert script into docsify document:
<script src="//unpkg.com/docsify-plantuml/dist/docsify-plantuml.min.js"></script>
Write your plantuml code into a code block marked plantuml:
### Section X
```plantuml
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml
```By default, we set the skin of the plantuml to a cleaner version for you.
However, You can still switch with this option (skin) if you prefer the classic one.
All available values are:
defaultclassic
For example:
<script>
window.$docsify = {
plantuml: {
skin: 'classic',
},
}
</script>
By default, the official PlantUML server is used. If you have your own, configure it using the serverPath option:
<script>
window.$docsify = {
plantuml: {
serverPath: 'https://custom-server.local/plantuml/png/',
},
}
</script>
By default, the svg is renderd inside an <img src=''/> tag.
If you want interactive svg (like links) configure the renderSvgAsObject option:
This will render like: <object type='image/svg+xml' data=''/>
<script>
window.$docsify = {
plantuml: {
renderSvgAsObject: true,
},
}
</script>
Please note that relative urls should start with $
```plantuml
@startuml
Alice -> Bob: Authentication Request [[$./other-file docs]]
Bob --> Alice: Authentication Response [[$../other-file docs]]
@enduml
```MIT © yelo, 2017 - present