ArchitectというGUIで操作するソフトウェア設計支援ツールを用いてUML図を描いてきました。必要なコンポーネントをドラッグアンドドロップするだけでUML図を作成できるので簡単なのですが、図のレイアウトは自分の手で微調整しなければならないので少々面倒です。それらの図を挿入する先のドキュメント本体はWordやExcelで作成するのですが、ドキュメント本体もUML図も同じ環境で一度に作成する方法はないかと思っていました。Codeであれば、Markdownでドキュメントを書くのとUML図の作成を一度にできるということを知ったので、その方法についてメモしておこうと思います。Markdownで書くメリット自分が思うMarkdown記法のメリットは以下の通りです。段落など見た目が統一される。コピペした際にも崩れない。プログラムのソースコードを見やすく記載できるテキスト形式なので、GitやSVNのバージョン管理や差分確認、マージがしやすい。テキスト形式なので、各種プログラムによる処理や自動化に馴染みやすい。Markdown記法一覧Markdownの各種記法についてはこちらの記事で分かりやすく紹介されているので参照ください。Codeをインストールします。こちらのサイトからインストーラをダウンロードして実行すればOKです。Codeの拡張機能であるPlantUMLをインストールします。PlantUMLで検索すれば以下のものが見つかるので、これをインストールして再読み込みで有効にします。JavaをインストールするPlantUMLを実行するにはJavaの実行環境が必要になります。そのため、下記の手順でJavaを予めダウンロード、インストールしておきます。Javaのダウンロードサイトを開く。「無料Javaのダウンロード」ボタンを押す。「同意して無料ダウンロードを開始」ボタンを押す。ダウンロードしたインストーラを実行してインストールします。64bit版なので、「jre-8u191-windows-x64.exe」がインストーラになります。GraphvizをインストールするPlantUMLがUML図を描画するために使用しているソフトウェアであるGraphvizをインストールします。下記の手順でインストーラをダウンロードしてインストールします。Graphvizのダウンロードサイトを開く。上部のメニューから「Download」を選択して開く。自分のPCのOSに合わせて、ダウンロードするインストーラを選ぶ。packages」を選ぶ。「graphviz-2.38.msi」を選んでダウンロードして実行すればOK。Enhancedをインストールします。検索すれば下記のものが見つかるので、インストール、再読み込みで有効にします。UML図の描画をできるようになります。動作確認として、適当なUMLドキュメントを作成してみました。今回構築した環境で実際に編集しているときの様子は以下のようになります。v」を押せばPreview画面が表示されます。ファイル上でPlantUMLのコードを書く際は下記のようにします。これにより、コード部分はPlantUMLによるUML図だと認識され、Preview画面にはUML図が下記のように表示されます。CodeでMarkdownのドキュメントを作成する際は下記のような拡張機能があり便利なので、一緒にインストールしておくといいと思います。v」で、クリップボードにコピーした画像を直接コピペできます。この時ペーストされた画像は、そのMarkdownファイルと同じディレクトリに、「YYYY-MM-DD-hh-mm-ss.png」の形式で保存されます。markdown-indexMarkdownの#や##で書くような各見出しに自動で番号を割り振ってくれる機能です。index」と表示されるのでそれを実行します。作成したドキュメントをHTMLやPDFに変換するMarkdownで作成したドキュメントは、最終的にはPDFやHTML形式に変換して配布することになります。今回構築した環境においては、下記の手順で行うのが一番シンプルだと思います。EnhancedのPreview画面上で右クリック。Browser」を選択する。使用しているWebブラウザ上でファイルが表示される。印刷メニューからPDF変換を実行して保存する。以上の手順で変換したPDFファイルは下記のようになり、各種PDFリーダーで閲覧できるようになります。(1)Sponsor引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。