メインコンテンツまでスキップ

DocusaurusにPlantUMLを表示するテーマを作ってみた

· 約2分
hoh
hoh

DocusaurusにPlantUMLを表示するテーマが公式にできないみたいなので作りました

PlantUML図を表示したい場合(pumld)

PlantUML diagram

PlantUMLコードを表示したい場合(puml)

@startuml
start
:Hello world;
:This is defined on
several **lines**;
stop
@enduml

plantuml-diagram の場合

PlantUML diagram

PlantUMLのコード表示(plantuml)

@startuml

!pragma teoz true
box "Internal Service" #LightBlue
participant Bob
box "Subteam"
participant Alice
participant John
end box

end box
participant Other

Bob -> Alice : hello
Alice -> John : hello
John -> Other: Hello

@enduml

使い方はQiitaやGitHub READMEに記載

  1. Qiita: https://qiita.com/flatring/items/74d3fc2dff90bf3f450e
  2. GitHub: https://github.com/plenarc/docusaurus-theme-plantuml

これで設計段階でPlantUMLの図を入れ込むことができる♪