0.2.6 • Published 5 months ago
docusaurus-theme-plantuml v0.2.6
docusaurus-theme-plantuml
Theme for displaying PlantUML in docusaurus.
What is this?
en
- this is a theme for displaying plantuml diagrams on docusaurus.
- at first, I tried to make it as a plugin, but it did not work, so I made it as a theme
- the default setting is to display the results rendered by the plantuml server via https communication.
ja
- これはdocusaurusにplantumlの図を表示するためのテーマです
- 最初、pluginとして作ろうとしましたがうまくいかなかったのでテーマとして作っています
- デフォルト設定ではhttps通信でplantuml serverにレンダリングさせた結果を表示します
image
- light mode
- dark mode
Precautions before use
en
- The default rendering destination is the official PlantUML server.
- Even though it is official, rendering is done via http, so if you handle confidential information, please set up your own server, etc., and use at your own risk.
- see below
- plantuml.com/en/faq - https://plantuml.com/en/faq
- How long do the images generated by PlantUML Server live for?
- plantuml.com/en/faq - https://plantuml.com/en/faq
ja
- デフォルトのレンダリング先はPlantUML公式のサーバーです。
- 公式とはいえ、httpを介してレンダリングしているので、機密情報を扱う場合には自分でサーバーを立てるなどして、自己責任のうえ活用してください。
- 以下を参照
- plantuml.com/ja/faq - https://plantuml.com/ja/faq
- PlantUML Serverで生成した画像はいつまで保持されますか?
- plantuml.com/ja/faq - https://plantuml.com/ja/faq
How to Use?
install
pnpm add docusaurus-theme-plantuml
or
npm install plugin-docusaurus-plantuml
or
yarn add plugin-docusaurus-plantuml
How to set up on docusaurus
docusaurus.config.js
module.exports = {
// ...other settings
themes: [
require.resolve('docusaurus-theme-plantuml'),
]
};
Example of description in markdown
## plantuml example
```pumld
@startuml
Alice -> Bob: Hello
@enduml
```
or
```plantuml-diagram
@startuml
start
:Hello world;
:This is defined on
several **lines**;
stop
@enduml
```
en
- We also take into account the case where you want to display PlantUML code as markdown and not “plantuml” to render it when
plantuml-diagram
pumld
ja
- markdownとしてPlantUMLのコードを表示したい場合も考慮して「plantuml」ではなく、以下の場合にレンダリングするようにしています。
plantuml-diagram
pumld
Then build your Docusaurus project
pnpm run build
or
npm run build
or
yarn run build
Options available
Option | Type | Default | Description |
---|---|---|---|
serverUrlLight | string | https://www.plantuml.com/plantuml/svg/ | Server URL for light mode |
serverUrlDark | string | https://www.plantuml.com/plantuml/dsvg/ | Server URL for dark mode |
debug | boolean | false | Turn on debug log output |
en
- by default, the official PlantUML server renders the image in SVG format
- docker is recommended if you want to prepare your own PlantUML server. specify its server URL as
serverUrlLight
etc.- reference: dockerhub - https://hub.docker.com/r/plantuml/plantuml-server
- for example, if you want to render in PNG format, configure as follows
ja
- デフォルトはPlantUML公式のサーバーでSVG形式にレンダリングしています
- 自分でPlantUMLサーバーを用意するのであればdockerがオススメです。そのサーバーURLを
serverUrlLight
などに指定してください- 参考: dockerhub - https://hub.docker.com/r/plantuml/plantuml-server
- 例えばPNG形式でレンダリングしたければ以下のように設定します
module.exports = {
// ...other settings
themeConfig: [
plantuml: {
serverUrlLight: 'https://www.plantuml.com/plantuml/png/',
serverUrlDark: 'https://www.plantuml.com/plantuml/dpng/',
},
],
};
- Note that the destination is
themeConfig
, notthemes
. - 設定先が
themes
ではなく、themeConfig
であることに注意してください
Changelog
Checkout the releases page for changelog.