`> tech-memo.club Topへ <https://tech-memo.club/>`_

##########################
2. PlantUML の使い方
##########################

**************************
2-1. サンプルの実行
**************************

.. image:: ./images/02_usage_001.png
    :alt: サンプル

| 新規テキストファイルとして「sample.pu」を作成し、中身は下記とする。
| ※拡張子は「.pu」とする。

::

    @startuml
    Bob -> Alice : こんにちは
    @enduml

| [Alt] + [D] キーでプレビュー表示

**************************
2-2. 画像ファイル出力
**************************

.. image:: ./images/02_usage_002.png
    :alt: エクスポート指示

| １．[Ctrl] + [Shift] + [P] キー押下
| ２．下部に表示される「PlantUML:カーソル位置のダイアグラムをエクスポート」をクリック

----

.. image:: ./images/02_usage_003.png
    :alt: ファイル形式選択

| 下部に表示される「png」をクリック
| ※pdf 形式等でも出力できます。

----

.. image:: ./images/02_usage_004.png
    :alt: エクスポート完了

| VS Codeウィンドウ右下にエクスポート完了のメッセージが表示される
| 「レポートを表示」ボタン押下

----

.. image:: ./images/02_usage_005.png
    :alt: 保存先パス確認

| 保存先のパスを確認して、当該ファイルを開く

----

.. image:: ./images/02_usage_006.png
    :alt: 保存結果の確認

| 保存先のパスを確認して、当該ファイルを開く

**************************
2-3. 参考
**************************
| ▼PlantUMLの公式サイト？
| https://plantuml.com/ja/
| ※各ダイアグラムのサンプルがあり、サンプルをコピペするだけで同じ図を表示できる

`> tech-memo.club Topへ <https://tech-memo.club/>`_