Docsify-plantuml NPM

docsify-plantuml

Install

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>

Usage

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

Options

skin

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:

default
classic

For example:

<script>
window.$docsify = {
  plantuml: {
    skin: 'classic',
  },
}
</script>

serverPath

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>

renderSvgAsObject

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