0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【VSCode】AsciiDocにPlantUMLを埋め込んでプレビュー表示

Posted at

VSCodeにAsciiDocを入れる

拡張機能を有効化するだけ。
image.png

PlantUMLを使えるようにする

以下参照。
Visual Studio Code で UML を描こう!

Krokiを有効化する

VSCodeでAsciiDoc拡張機能のSettingを開き、Krokiを有効化する。
image.png

すると、AsciiDocファイルに埋め込んだPlantUMLをプレビュー画面に反映できる。
image.png

グラフを別ファイルにしてincludeすることも可能。
image.png

graph2.pu
[plantuml]
----
@startuml
title シーケンス図
アリス -> ボブ: リクエスト2
ボブ --> アリス: レスポンス2
ボブ --> アリス: レスポンス3
@enduml
----
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?