もう設計書は、これで良いんじゃないかな。
まず、VSCode+PlantUMLを用意します。
serverless.hateblo.jp
次に、MarkdownPreviewEnhancedをインストール。
Ctrl+P ⇒ "ext MarkdownPreviewEnhanced"
https://b1tblog.com/2019/10/08/vscode-markdown1/
あとは、".md"ファイルをプレビューするだけ。
プレビューを表示するには、Markdownファイル(.md)を開いているエディタ上で右クリックし、「Markdown Preview Enhanced: Open Preview to the Side」を選択します。すると、分割された画面にプレビューが表示されます。
「```puml」から書き始める感じです。
埋め込みデモ! --- 1. DXとは? ```puml @startuml skinparam sequenceArrowThickness 2 skinparam roundcorner 20 skinparam maxmessagesize 60 skinparam sequenceParticipant underline actor User participant "First Class" as A participant "Second Class" as B participant "Last Class" as C User -> A: DoWork activate A A -> B: Create Request activate B B -> C: DoWork activate C C --> B: WorkDone destroy C B --> A: Request Created deactivate B A --> User: Done deactivate A @enduml ``` 20200701追記 ちなみにpumlは省略系なのでちゃんとplantumlって書いても動きます。