(2020年12月8日追記)VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処

# 概要

-  [Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)でのエクスポート方法について記載します。
- 対処法一覧
  - 対処法1 オンラインモードで使用する
  - 対処法2 オフラインモードで使用する
  - 対処法3 拡張子を変更する
  - 対処法4 Draw.IOのオンラインサイトを利用する
  - 対処法5 デスクトップ版を利用する

# 履歴

- **2020年10月15日** オンラインモードでエクスポート不可となった問題への対処方法（オフラインモード）を追記
- **2020年11月4日** Draw.IOを利用した方法を追記
- **2020年11月9日** デスクトップ版を利用した方法を追記
- **2020年12月8日** 最新の更新（1.2.0）でオンラインモードでエクスポート可能となった

# 事象

- Draw.IO Integrationをインストールした際に、初期設定（私の環境）ではエクスポートメニューが表示されませんでした。（バージョンが古い（＜1.2.0）場合）

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204150/a343f57b-0f6d-70a6-33ac-16bacbd568e9.png)

# 環境

- Windows 10 Pro 1909
- Visual Studio Code 1.49.0 
- Draw.io Integration 1.2.0

# 対処法1 オンラインモードで使用する

💡 Draw.io Integration 1.2.0で確認

1. Draw.io Integration拡張機能の設定を開きます。

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204150/8ec77a5a-c4d1-0726-aa7f-c3a4285ab6c3.png)

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204150/7534561c-0150-8492-c10c-03c5e20bed5d.png)

2. Offline設定のチェックを外します。

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204150/d2990cd4-30da-ac57-c331-090210ae65ef.png)

3. ファイルを開いていたら再度開きなおし、エクスポートメニューが表示されていることを確認します。

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204150/425b4134-79ad-8cc8-7b29-700d791a523d.png)

    私の環境では、PNG、SVGでエクスポートできることを確認しました。

## 注意点

- この設定時（Offline設定のチェックを外した場合）
    - オフライン環境で使用できなくなります。
    - View > Scratchpadが使用できなくなります。（@feifo さん[情報](https://qiita.com/feifo/items/4bf295b2464b82b26152#_reference-1c938832b89659866907)。独自の画像が使用できない、ということのようです。）


# 対処法2 オフラインモードで使用する

1. オフラインモードに設定する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204150/1be53613-5dd4-0cb4-5bf4-ce1ff75e56cc.png)

2. ファイル-Exportを選択する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204150/1cbda5a3-c770-809d-f520-674531974ac5.png)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204150/78a5af56-b50a-9717-8ca3-52192c187ebc.png)

## 注意点

- 拡大率（解像度）は100%固定です。


# 対処法3 拡張子を変更する

https://github.com/hediet/vscode-drawio#editing-drawiosvgdrawiopng-files

1. 拡張子を`.drawio.svg`、または`.drawio.png`としてファイルを作成します。
2. 図形を作成して保存すると、埋め込まれたDraw.io図を含む完全に有効なsvg/png画像が保存されます。
3. そのままMarkdownやWordなどに埋め込んで使用することができます！

**Wordに埋め込む場合などはこの方法を使用します。**


## 注意点

- 拡大率（解像度）は100%固定です。
- 差分が必要な方法はこの方法は使用できません。
    - 以下の記事を参考に、SVG形式を前提としてMarkdown含め全てテキストで管理することをお勧めします。

        https://qiita.com/oruharo/items/f5bdeedad28731da1b11



# 対処法4 Draw.IOのオンラインサイトを利用する

1. [Draw.IO](https://app.diagrams.net/)にアクセスする
2. ローカルのファイルをアップロードしてからエクスポートする


## 注意点

- 一度アップロードする必要があるため、規約等の問題がある場合には利用しづらいかもしれません。

# 対処法5 デスクトップ版を利用する

以下でオフライン版のデスクトップアプリがダウンロードできますので、エクスポートするときのみデスクトップ版でエクスポートします。
https://github.com/jgraph/drawio-desktop

## 注意点

- この方法を利用するなら、最初からデスクトップ版で編集してもよい気はしますね…😅

# 参考資料

- [VSCodeでDraw.ioが使えるようになったらしい！](https://qiita.com/riku-shiru/items/5ab7c5aecdfea323ec4e)
- [vscode-drawio 最新版(v0.4.0) でExportできない](https://qiita.com/kE-sakai/items/a5331d5e59125260c189)
- [Not able to export as pdf #18](https://github.com/hediet/vscode-drawio/issues/18)
- [Hide Export Options #22](https://github.com/hediet/vscode-drawio/issues/22)
- [Add Export Option #39](https://github.com/hediet/vscode-drawio/issues/39)
- [【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜](https://qiita.com/G-awa/items/8fd414700b68b2bcafcc)