https://github.com/imyelo/docsify-plantuml
PlantUML plugin for docsify
https://github.com/imyelo/docsify-plantuml
docsify plantuml
Last synced: 6 months ago
JSON representation
PlantUML plugin for docsify
- Host: GitHub
- URL: https://github.com/imyelo/docsify-plantuml
- Owner: imyelo
- License: mit
- Created: 2017-08-15T13:30:52.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-11-10T01:36:00.000Z (11 months ago)
- Last Synced: 2025-03-28T19:07:40.016Z (6 months ago)
- Topics: docsify, plantuml
- Language: JavaScript
- Homepage:
- Size: 648 KB
- Stars: 70
- Watchers: 3
- Forks: 17
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# docsify-plantuml
[](https://www.npmjs.com/package/docsify-plantuml)
## Install
1. Configure docsify-plantuml (optional):
```html
window.$docsify = {
plantuml: {
skin: 'default',
},
}
```
See [Options](#Options) for more details.
2. Insert script into docsify document:
```html
```
## Usage
Write your plantuml code into a code block marked ``plantuml``:
````markdown
### 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](https://github.com/matthewjosephtaylor/plantuml-style) 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:
```
window.$docsify = {
plantuml: {
skin: 'classic',
},
}
```
## serverPath
By default, the official PlantUML server is used. If you have your own, configure it using the `serverPath` option:
```
window.$docsify = {
plantuml: {
serverPath: 'https://custom-server.local/plantuml/png/',
},
}
```
## renderSvgAsObject
By default, the svg is renderd inside an `![]()
` tag.
If you want interactive svg (like links) configure the `renderSvgAsObject` option:
This will render like: ``
```
window.$docsify = {
plantuml: {
renderSvgAsObject: true,
},
}
```
Please note that relative urls should start with `$`
````markdown
```plantuml
@startuml
Alice -> Bob: Authentication Request [[$./other-file docs]]
Bob --> Alice: Authentication Response [[$../other-file docs]]
@enduml
```
````
## Example
### Basic Usage
- [index.html](example/basic/index.html)
- [README.md](https://raw.githubusercontent.com/imyelo/docsify-plantuml/master/example/basic/README.md)
### Render as SVG Object
- [index.html](example/svg-object/index.html)
## Related
- [docsify](https://github.com/QingWei-Li/docsify/)
- [PlantUML](http://plantuml.com/)
## License
MIT © yelo, 2017 - present