Visual Studio Code にインストールした、テキストから UML やマインドマップなどを作図できる PlantUML エクステンションのプレビュータブに表示された図の画像を保存する手順を紹介します。
※ Visual Studio Code のバージョンは 1.103.0 です。
※ PlantUML エクステンションのバージョンは 2.18.1 です。
前回の記事
前回は、Visual Studio Code に PlantUML のエクステンションをインストールして、テキストからマインドマップをプレビュータブに表示しました。
PlantUML で作成された図のコピー
PlantUML がサポートしている拡張子（.wsd, .pu, .puml, .plantuml, *.iuml）のファイルを Visual Studio Code で開き、図を描くためのテキストを入力・保存すると、プレビュータブに図が表示されます。
以下は、公式サイトの「マインドマップの文法と機能」に記述されたマインドマップをマークダウン形式で記述するサンプルのテキストです。
@startmindmap
* root node
* some first level node
* second level node
* another second level node
* another first level node
@endmindmap
プレビュータブは右上の「Preview Current Diagram」ボタンを押すと表示されます。
プレビュータブにテキストに対応する図が表示されたら、プレビュータブにマウスポインターを移動させて、下側に表示されるボタン群の中から「コピー」ボタンを押して、クリップボードに図の画像をコピーします。
クリップボードにコピーされた図の画像は、任意のペイントソフトなどに貼り付けて保存しましょう。
※例では、Paint.NET アプリで、新規作成した後に貼り付けています。
他にも、PlantUML エクステンションのプレビュータブでは、図の画像を以下のように操作ができます。
Previewer Operations
Zoom:
- Zoom to select area
選択領域にズーム- Pinch to zoom (TouchPad)
ピンチしてズーム（タッチパッド）- Click to zoom in, Alt + click to zoom out
クリックすると拡大、Alt キーを押しながらクリックすると縮小- Ctrl + mouse scroll to zoom in/out
Ctrl + マウススクロールでズームイン/ズームアウト- Middle mouse button click to toggle zoom
マウスの中ボタンをクリックするとズームが切り替わります- Zoom in / zoom out / toggle buttons of the controls bar
コントロールバーのズームイン/ズームアウト/トグルボタンPan:
- Right mouse button drag
右マウスボタンドラッグ- Two-finger move to pan (TouchPad)
2本指でパンする（タッチパッド）- Mouse scroll
マウススクロールSnap to border:
VS Code PlantUML エクステンションのプレビュータブの ? ボタンを押した際のダイアログのメッセージと Google 翻訳
- Scroll to most bottom/right/top/left, preview will snap to that border
一番下/右/上/左までスクロールすると、プレビューはその境界線にスナップします。
まとめ
Visual Studio Code 用の PlantUML のエクステンションで、プレビュータブに表示された図の画像は、プレビュータブにマウスオーバーした際に表示される「コピー」ボタンで、クリップボードにコピーできることが確認できました。
Thank You!
- シンプルなテキストファイルで UML が書ける、オープンソースのツール
- PlantUML – Visual Studio Marketplace
- Visual Studio Code – Code Editing. Redefined
- Paint.NET – Free Software for Digital Photo Editing
記事一覧 → Compota-Soft-Press
コメント