4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Markdownの文書にPlantUMLを使ってUMLを埋め込む

Posted at

Markdownの文中にPlantUMLでUMLを埋め込むのに少し苦労したため、備忘として残します。

PlantUMLを使うための下準備

PlantUMLを使うために、GraphvizとOpenJDKをインストールします。

下記を参考にインストールしました。
Visual Studio CodeでPlantUMLを使うメモ (Windows編)

VSCodeの拡張機能のインストール

VSCodeの拡張機能から以下の拡張機能を導入します。

  • PlantUML

    VSCodeでPlantUMLを使ってUMLを書くために用います。

  • Markdown Preview Enhanced

    Markdownの文書中にPlantUMLのUMLを埋め込むために用います。
    Qiita Markdown Previewと同時に有効化すると、干渉して正しく動作しないようなので注意。

VSCode上でのUMLの描画

以下のサンプルコードのプレビューがVSCode上で描画できるか確認します。

個人的に、可視性をPlatUMLの独自記号でなく、+-で表したいため、skinparam classAttributeIconSize 0を指定しています。

サンプルコード

sample.puml
@startuml
skinparam classAttributeIconSize 0

title サンプルクラス

class Encoder{
    + translate()
}
Interface Reader
Reader <|-- CsvReader
Encoder .> Reader
@enduml

プレビュー

プレビューはAlt + dで表示できます。

sample.png

プレビューが表示できれば動作確認はOK。
クラス図やシーケンス図を単に画像として出力するだけなら、この構成で実現できます。

Ctrl + Shift + pでコマンドパレットを開いて、PlantUML: Export Current Diagramを実行すると、画像として出力できます。

(方法1)外部ファイルとして保存したUMLを読み込む

Markdownの文書中に、別ファイルで保存したUMLを表示できるようにします。

画像化して挿入すると、UMLの更新後に再び画像化しないといけないのが手間なので、PlantUMLで書いたまま挿入できるようにします。

plantuml.jarのインストール

  • plantuml.jarファイルをダウンロードします。

https://plantuml.com/ja/download
からplantuml.jarをダウンロードし、任意の場所に配置します。

(公式ページのはずですが)広告が多いので注意。
私はリンク先からgithubのreleaseページに飛んでダウンロードしました。

  • VSCodeの設定

Ctrl + ,を押してSettingsを開き、markdown-preview-enhanced.plantumlJarPathの項目に、先ほどのplantuml.jarファイルのパスを設定します。
plantumlJarPathで検索すると出てきます。

plantumljar.PNG

本文中へのUMLの挿入

本文中で@import文でpumlファイルを読み込むと、UMLを挿入できます。

@import "sample.puml"

(方法2)コードブロックとしてUMLを描く

Markdownの文書中に、直接PlantUMLでUMLを記載します。

コードブロック記法でplantumlを指定してUMLを描くと、Markdownの文書内でUMLを挿入できます。

sample.md
```plantuml
@startuml
skinparam classAttributeIconSize 0

title サンプルクラス

class Encoder{
    + translate()
}
Interface Reader
Reader <|-- CsvReader
Encoder .> Reader
@enduml
```

参考

4
6
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
4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?