draw.ioをVSCode上で使用/図表をGitで一元管理

描画ツールのdraw.ioをVSCodeの拡張機能で利用可能にして、データをgitで一括管理する方法を解説します。
draw.io以外の描画ツールについては以下にまとめてあります

1. 概要

1.1. draw.ioとは

  • draw.io

    • WEBブラウザベースの描画ツール
      • Googleアカウントで運用でき、ローカル/Google Drive/Github等にデータを保存可能
    • 大抵の図(ex. フロー, システム構成…)はこれで作成可能です
    • 完成したらpng形式で出力して、markdownやpptに差し込むのが一般的
  • テンプレートの例

    • FlowChartやクラス図
      image
    • Cloudのアーキテクチャ
      image
  • WEBで利用する際の問題

    • 共同開発時の管理の煩雑さ
      • あるメンバが作った図を、別メンバが編集できない
        • レビュー、修正が面倒
      • gitでAPのコードと一緒に一括管理できない
    • セキュリティ
      • 制約の厳しいPJであれば、ツール自体を使えないことが多い

上記の問題を解決するために、ローカル版を利用します

1.2. VSCodeの拡張機能

VSCode Draw.io Local

  • 拡張子を.drawio.svgにしてファイル作成すると、Draw.ioに関連付けられ、svg形式のファイルを作画&作成可能
    • ファイルを開くだけでDraw.ioの編集画面VSCode内に立ち上がる
  • メリット
    • SVG形式
      • gitで管理可能
        • 共同編集、差分管理が用意
      • 読み込みがpng等と比較して高速
    • セキュリティ上の制約をクリア
  • mdファイルには以下のようにパス参照で埋め込む(HTMLからimgタグで参照してもOK)
    1
    ![](img/image1.drawio.svg)

2. 使用方法

2.1. 拡張機能をInstall

  • Draw.io IntegrationをInstall
    • VSCodeの左のサイドナビよりExtensionsアイコンを選択(or Ctrl+Shift+X)
    • Draw.ioで検索

Draw.io Integration

  • アイコン横のInstallボタンを選択
    • Installすると以下の様な説明ページを確認出来ると思います

Draw.io Integration

2.2. ファイルを生成

  • .draw.io.svg形式のファイルを生成
    • markdownのドキュメントと同じディレクトリに配置(後でパス参照するため)
      1
      touch sample.drawio.svg

2.3. 図表を編集

sample.drawio.svgを開くと自動的にDraw.ioの編集画面が開きます

drawio.svg

  • WEBのDraw.ioと同様に編集
    • VSCodeのタブの一つで編集できるのが中々便利
  • Ctrl+S等で保存
  • Exportの必要はありません

2.4. Markdwonから参照

  • 相対パスで先ほどのsvgファイルを参照

    • 以下で表示された
      1
      ![](./sample.drawio.svg)
  • プレビューの様子

    • 先ほど編集した図が出ます
      draw.io vscode preview

後はGitにまとめて送れば、他メンバも同様に編集できます

関連記事

描画ツールまとめ [draw.io/Cloud Craft/Mind Node/plantUML]

個人的にイケてると思う描画ツールのまとめです。システム構成図や業務フロー図を何故かExcelで作る風潮があるようですが、そもそも描画ツールではないので、微妙な絵しか起こせません。以下のツールを導入して、レガシーな現場をあなたの手で改善しましょう。新人であれば最初の小さな成果になるかもしれません。(厳しい上司に当たると、Excelを使うだけで情弱扱いされます)

Cloud Craft

1. 描画ツール一覧

2. 各ツールについて

2.1. draw.io

image

  • draw.io

    • WEBブラウザベースの描画ツール
      • Googleアカウントで運用でき、ローカル/Google Drive/Github等にデータを保存可能
    • 用途:万能
      • フローやシステム構成等の大抵の図は全てこれで作成可能です
  • テンプレートの例

    • FlowChartやクラス図
      image
    • Cloudのアーキテクチャ
      image

image

2.2. cloud Front

image

  • cloud Front

    • WEBベースの描画ツール
    • 用途
      • クラウドアーキテクチャのシステム構成図作成
        • AWSに特化しており、draw.ioのようにGCPのテンプレはありません
      • AWS上の環境情報のリアルタイム取得(有料)
        • 構成図の自動描画
        • 構成や設定情報の表示
      • 見積もりの自動生成
    • AWSを活用しているチームであれば今すぐ導入を勧めます
  • 以下のような図を数分で作成できます
    image

  • リアルタイムデータの確認機能

    • 任意のコンポーネントをクリックすると、現在のコンフィグとコストを確認できます。AWS Web Consoleに直接ジャンプして、Liveリソースとタグを確認できます
  • Collaborate機能

    • ダイアグラムやAWSリソースに直接ドキュメントを追加可能です。チーム全体で図をオンラインで共有・編集したり、ドキュメント、Wiki、プレゼンテーションにエクスポートしたりすることができます。

image

  • 運用費の見積もりは上記のように出せます。

  • 2次元の図も作成可能です

    • 優秀なエンジニアのドキュメントをみると、これかdraw.ioで作っている方が多いです
    • pptで綺麗に作るとだいぶ時間を食うので避けましょう
  • 現実の環境から図を自動生成することまでできます

    • 公式説明訳
      1
      2
      3
      4
      5
      公開してすぐに古くなってしまう静的なドキュメントを作成する時間を無駄にしないでください。

      Cloudcraft Liveは、AWS環境のすべてのサービス関係を瞬時に分析し、完全なシステムアーキテクチャ図をリバースエンジニアリングします。

      強力な自動レイアウト機能や高度なAWSアカウントスキャン機能もAPIとしてご利用いただけます
  • 有料版について

    • 単なる構成図の描画であれば、無料版で可能
    • AWSとAPI連携して情報を取得するのは有料

image

2.3. PlantUML

image

  • PlantUML
    • 用途
      • コードによるUMLの作成
        • draw.ioと同様に大抵の図に対応可能
    • コーディングに慣れた上級者向けではありますが、テキストなのでGitで差分管理可能
    • PlanUMLの実行には以下のインストールも必要です
      • Java
      • Graphviz
  • 基本的にVS Codeにプラグインを入れて使います
    • Visual Studio MarketplaceからInstall

image

2.4. MindNode

image

  • MindNode

    • iPad用のアプリ
    • 用途
      • ツリー状の情報のまとめ
        • アイデアの整理によく使っています
  • スキルマップを5分程度で整理した例

2.5. MindMaster

  • MindMaster

    • MindNodeのWEB版だと思ってください
    • downloadしてAPとしても利用可能です
    • 用途
      • MindNodeと同様
  • 以下の様にテンプレを選択して利用を開始できます

    • pptやExcelで必死にレイアウトを調整する手間は
      image

今回の解説は以上です。良いツールを見つけたら追記します。

関連記事

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×