0
2

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 3 years have passed since last update.

Visual Studio Code + MarkDown で画面遷移図を描写しようとしたけどつまずいた時の話し

Last updated at Posted at 2020-05-25

前置き

新しいプロジェクトにアサインされて、画面遷移図を見てみると
画面遷移図.md - 未設定 (ワークスペース) - Visual Studio Code 2020-05-25 11.45.34.png
お、MarkDown で書かれてるのね。

なので、Visual Studio Codeを起動して、プレビュー表示してみたところ
画面遷移図.md - 未設定 (ワークスペース) - Visual Studio Code 2020-05-25 11.47.18.png

画面遷移図.md - 未設定 (ワークスペース) - Visual Studio Code 2020-05-25 11.53.52.png
あれ? 描写されないぞ。。。

となったので、対応した時の手順のメモになります。

実際にやったこと

一先ず、アサインされた案件の方々にどうしたら良いか聞いてみたところ
[7(1)]KDDI Chatwork - CONNECT_アプリ(Ph2_信用_投信_開発のみ) - Google Chrome 2020-05-25 11.57.20.png
とか
[7(1)]KDDI Chatwork - CONNECT_アプリ(Ph2_信用_投信_開発のみ) - Google Chrome 2020-05-25 11.57.49.png
とか回答いただけました。

まだ良く分かっていないですが、以下は必要そうだという事は分かりました。

「Markdown Preview Enhanced」をインストール

いただいたリンクを確認してみる。
https://qiita.com/asuzuki2008/items/87c09a91cc53b15a7555

こちらの導入手順に記載してある内容を実施してみました。

画面遷移図.md - 未設定 (ワークスペース) - Visual Studio Code 2020-05-25 12.03.11.png

「Graphviz」をインストール

記載されているURLにアクセスしたんですが、私はパッケージファイルを見つけることができなかったので、同じような方は以下からダウンロードするのが良いかもしれません。
▼ Windows Packages
https://graphviz.gitlab.io/_pages/Download/Download_windows.html

ダウンロードしたらインストールしてください。

これで描写出来る!と思いプレビュー表示をしてみました。
画面遷移図.md - 未設定 (ワークスペース) - Visual Studio Code 2020-05-25 12.26.22.png

Error: write EPIPE
Error [ERR_STREAM_DESTROYED]: Cannot call write after a stream was destroyed

いや、エラーなんですけど。。。

ここから、「plantUML」をインストールしてみたり
画面遷移図.md - 未設定 (ワークスペース) - Visual Studio Code 2020-05-25 12.37.09.png

こちらの記事を参考にしてみたり
https://qiita.com/zonbitamago/items/7946acfb4cbaa139f00a

対応をしていたのですが、一向にエラー解消せず。。。

「java」 をインストール

Google先生に質問攻めしていると、どうもJava入っていないと使えないっぽいとのお告げが。。。

とりあえずJava先生をインストールしてみる。
https://www.java.com/ja/

Visual Studio Code を再起動して、再度プレビュー表示をクリックしたところ
Preview 画面遷移図.md - 未設定 (ワークスペース) - Visual Studio Code 2020-05-25 12.41.11.png

やっと表示されました!!

まとめ

Markdown Preview Enhanced を使用するのに必要な設定は

  • 「Java」 のインストール
  • Visual Studio Codeに「Markdown Preview Enhanced」のインストール
  • 「Graphviz」のインストール

でした。

途中「plantUML」もインストールしましたが、無効にしても図形描写は出来たのでインストールは必要ないかもです。

以上、参考にさせていただいたサイトの皆々様方、ありがとうございました。

0
2
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
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?