関連記事

PlantUML入門 ER図を書く基本 for VSCode - Qiita

PlantUMLでER図を書く文法を知りたい場合は↑この記事を参照してください。

↑の記事を書いた時よりも、より便利なVSCodeの拡張機能が使えるようになっていたり、デフォルトのテーマが変わってたりしていたので、その辺りを調べた事を書きました。

QiitaでPlantUMLの図を書く

```plantuml と```で囲むとその中に書いたPlantUMLのコードがQiita上でER図になります。

ER図を書く技術

PlantUMLファイルで自分が使っている拡張子
*.puml

PlantUMLのER図をプレビュー
Alt+Dキー

詳細は、↓の記事を参照してください。

PlantUML入門 ER図を書く基本 for VSCode - Qiita

ER図作成例

※↑Qiitaの機能でPlantUMLのER図が表示できています。
↓そのコードです。

ビューワー(VSCode拡張機能)

今回は↓この拡張機能を使います。

PlantUML - Simple Viewer
v2.17.6
well-ar
43,816
(4)

以前は↓こちらを使っていました。

PlantUML
v2.17.5
jebbs
1,557,930
(93)

※一番ダウンロード数が多いですが、ER図からコードにジャンプする機能がないので採用を見送りました。
これを使っていた頃は他のライブラリをインストールとか、ER図の描写が遅かったりとか、反応がなかったりとか、拡大縮小がおかしかったりとか、いろいろ不満な点が多々ありました。

VSCodeマーケットプレイス

PlantUML - Simple Viewer - Visual Studio Marketplace

Alt + Dキーでプレビューが表示されます。

ER図のテキストをクリックすると、現在のエディタウィンドウ上の該当コードにフォーカスが合わされます。つまり、ER図からコードに簡単に移動できるため、巨大なER図でもコードに戻ることが容易になります。

機能

プレビュー図の表示。PlantUMLプレビューを開始するには、Alt + D を押します。
- 自動更新。
- ズームとスクロールのサポート。
- 複数ページの図のサポート。
- インスタントプレビュー。図がエクスポートされている場合は、すぐにプレビューが表示されます。
- ローカルまたはサーバーからのエクスポート。
- 境界線にスナップ。
図のエクスポート。
- カーソル位置、現在のファイル、ワークスペース全体、選択したワークスペースでエクスポートできます。
- 同時エクスポート。
- URLの生成。
- 複数ページの図のサポート。
- ローカルまたはサーバーからのエクスポート。
- 画像マップ（cmapx）のサポート。
編集サポート。
- PlantUMLコードのフォーマット。 (非推奨)
- すべてのタイプの構文のハイライト。
- すべてのタイプのスニペット。
- 基本的な自動補完とマクロのシグネチャサポート。
- シンボルリストのサポート。

その他

マルチルートワークスペースのサポート。
MarkDownの統合サポート。デモを表示
画像からソースを抽出するサポート。

※注意：カスタマイズしたplantuml.jarを使用している場合は、最新バージョンに更新して、複数ページの図のサポートを有効にしてください。（V1.2017.15以降）
PlantUMLコードのフォーマットは非推奨です。正しく動作する場合にのみ使用し、自動フォーマットの場合（保存時のフォーマット）には強制的に無効になっています。

テーマ

PlantUMLはテーマも更新され大変見やすくなりました。
黄色と灰色、赤のPlantUMLのイメージは消え、汎用的なテーマカラーがデフォルトになりました。

テーマはPlantUMLのコードの先頭に記述します。

自分の好みのテーマ

ダークモードで使用しても大丈夫
ダークモードでも図や文字が見やすい
目が疲れにくい
奇妙のな色を使っていない

自分が選んだ3つのテーマ

' !theme toy
' !theme vibrant
' !theme _none_

テーマの使い方 (↑コメントアウトを外して使う)
!theme toy

コメントアウトは「'」を先頭につける。
コメントアウトの例
' !theme amiga

※注意 2つのテーマを同時に使うと両方のテーマが上書きか、反映がされます。

テーマギャラリー

このページ全てのテーマの使用例があります。

※全テーマの使用例を1ページに収めているので超巨大ページになっています、開く時に注意してください。

公式のテーマ一覧

theme none
theme amiga
theme aws-orange
theme black-knight
theme bluegray
theme blueprint
theme carbon-gray
theme cerulean
theme cerulean-outline
theme cloudscape-design
theme crt-amber
theme crt-green
theme cyborg
theme cyborg-outline
theme hacker
theme lightgray
theme mars
theme materia
theme materia-outline
theme metal
theme mimeograph
theme minty
theme plain
theme reddress-darkblue
theme reddress-darkgreen
theme reddress-darkorange
theme reddress-darkred
theme reddress-lightblue
theme reddress-lightgreen
theme reddress-lightorange
theme reddress-lightred
theme sandstone
theme silver
theme sketchy
theme sketchy-outline
theme spacelab
theme spacelab-white
theme superhero
theme superhero-outline
theme toy
theme united
theme vibrant

↓テーマは人それぞれ好みの問題なので折りたたみます。

テーマの選別

テーマ選別の結果
最終結果
この3つを使ってみることにしました。

' !theme toy
' !theme vibrant
' !theme none

テーマ選別の結果

' !theme toy
' !theme vibrant
' !theme none
' !theme amiga
' !theme blueprint
' !theme cloudscape-design
' !theme crt-green
' !theme lightgray
' !theme metal
' !theme reddress-darkblue
' !theme reddress-darkgreen
' !theme reddress-darkorange
' !theme reddress-darkred

※タブでインデントを下げているのは使えそうだけど自分の好みではなかったもの。

参考

PlantUML入門 ER図を書く基本 for VSCode - Qiita

QiitaでPlantUMLが使えるようになっていた - Qiita