Visual Studio Code - *.drawio.svg や *.drawio.png の衝撃 - Qiita
はじめに 先日、 Visual Studio Code の Extension に Draw.io Integration という、VSCode で draw.io を使用出来る拡張機能がリリースされ話題になりました。 リリースされるや否や、界隈では盛り上がりを見せまして、Qiita の記事や #InfraStudy でも導入方法や事例が紹介されたりしました。 VSCodeでDraw.ioが使えるようになったらしい！ - Qiita Infrastructure as Codeにおける理想のドキュメント管理を目指して #infrastudy | Developers.IO そんな訳で、モデリングなどの設計作業をするときはこの方法で作図するのがデフォルトになってきたのですが、先日更に（個人的に）驚愕の機能を知ったのでご紹介します。 draw.io について draw.io は無料の作図ツール
Diagramly - Draw Diagrams Online
Flowchart Maker and Online Diagram Software draw.io is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPMN online, as a circuit diagram maker, and more. draw.io can import .vsdx, Gliffy™ and Lucidchart™ files . Loading... Please ensure JavaScript is enabled.
Draw.io でフローチャートを書いてみよう！ | DevelopersIO
お絵かき大好き、かめです。 あまり上手くはないのですが、最近は画用紙などに落書きして娘のおもちゃを作るのにハマっています。 はじめに 先日、 手順書を書くときに気をつけていること | DevelopersIO でも書きましたが、私は手順書を作成する際になるべくフロー図を書くようにしています。 前職では、フローといえば Visio を使っていたのですが、弊社では Visio を採用していないので、似た操作感のツールを探し、 Draw.io にたどり着きました。 今回はこちらをご紹介します。 Draw.io とは 弊社ブログ エンジニアのための無料で使えるドローイングツールまとめ | DevelopersIO などでも簡単に紹介されていますが、 Draw.io にアクセスするだけで利用できる無料のお絵かきツールです。 魅力1：豊富なテンプレート フローチャートだけでなく、ネットワーク図や ER
無料の図形作成ソフト「draw.io」の使い方について解説
draw.ioとはdraw.ioはUMLやブロック図などの説明図を作成することができる無料のwebサービスです。 登録やインストールも必要ないので手軽に利用することができます。 以下の説明図もdraw.ioで作ることができます。(公式サイトより) まずdraw.ioのページにアクセスします。以下のリンクからアクセスできます。 https://www.draw.io/ アクセスすると以下のようなポップアップが現れるので「Create New Diagram」を選択します。 次に以下のようなポップアップが現れるので、テンプレートを選択して「Create」をクリックするとテンプレートを使用することができます。 ここでは何も選択せず「Brank Diagram」を使用します。 何も選択せずに「Create」をクリックすると以下のように白紙の作成画面が現れます。 Aメニューバー：ファイルの保存やヘル
[データベース]draw.ioでデータベース設計のER図をかこう -インストール編-
どうも。つじけ（tsujikenzo）です。このシリーズでは「draw.io（ドローアイオー）でデータベース設計のER図をかこう」ということで、全4回でお届けします。今日は1回目で「インストール編」をお送りします。 このシリーズでまなぶことこのシリーズは全編を通して「draw.ioの使い方を学ぼう」という内容になっています。データベースは、「ERモデル」と「IE表記法」という2つの手法を用いることで、初心者でもかんたんに設計図を作成することができます。 しかしながら、半自動的にデータベースの設計図を作成してくれるツールはありません（ERwinやERstudioというソフトがあったようですが、今は情報が更新されていない気がします）。draw.ioはあくまで、アイディアをER図に落とし込む描画ツールです。 また、SQLからテーブルを作成するような手順も、想定しておりません。「ER図とはなにか」
![[データベース]draw.ioでデータベース設計のER図をかこう -インストール編-](https://cdn-ak-scissors.b.st-hatena.com/image/square/8ee003b0af0c7807a94da7da2342e92a6f3b370a/height=288;version=1;width=512/https%3A%2F%2Fi2.wp.com%2Ftgg.jugani-japan.com%2Ftsujike%2Fwp-content%2Fuploads%2F2021-02-04_17h11_13.png%3Ffit%3D1054%252C690%26ssl%3D1)
draw.io を利用する３つの方法
システム構成図を書く時、ツール選びに悩むことってありませんか？ システム構成図に限らずとも、情報を分かりやすく表現する手段として、いわゆる「お絵かきツール」はとても需要があるのではないでしょうか。例えば Nulab の Cacoo だったり、MS Visio・Excel・PowerPoint だったりと、人によって・現場によって多種多様だと思いますが、今回はその中でも個人的によく使っている draw.io について紹介し、その使い方について共有したいと思います。 draw.io とは？システム構成図や図面等の作成に便利なお絵かきツールで、ブラウザ上で動くウェブアプリケーションです。オープンソース化（Apache License 2.0）されており、提供元 JGraph の GitHub リポジトリにてソースコードが公開されています。 公式サイトがあるので、合わせてチェックしてみてください。
draw.io Desktop版のメリットはコレだ
無料で使えるチャート作成アプリdraw.ioには、Webアプリケーション版とは別に、デスクトップアプリケーション版とGoogle Chrome拡張機能版があります。 なぜブラウザ上で使えるWeb版とは別に、デスクトップ版や拡張機能版も提供するのでしょうか？ ここではこれらの違いとユーザーにとってのメリットを紹介します。 Web版とデスクトップ版の違いはウィンドウ Webアプリ版があるのに、なぜわざわざデスクトップ版や拡張機能版を紹介するかというと、単純に使い勝手の問題のようです。 Webアプリ版はブラウザ上で動作するので作業エリアの大きさは、ブラウザのウィンドウサイズによって決まります。 draw.ioの作業画面はできるだけ広くとりたい、でもブラウザをフルスクリーンで使うのはイヤ、ということです。 その点、デスクトップアプリならブラウザとは関係ない独立したウィンドウで動くから使いやすくなり
UMLとか図を描くならdraw.ioがいいぞ - するめごはんのIT日記
ごきげんよう 今回はスマスピ関係ない話。 UMLでシーケンス図なりクラス図なりアクティビティ図なりを描く機会は、ITエンジニアのあるあるだと勝手に思っている。 え？そもそもドキュメントをまったく書かない？ドキュメントはmustで必要ではないけど、常に書かない文化だとしたらどうやって共有知にしてるんだろう。教えてほしいです。 で、最近そんな機会がやってきたわけでして、ツールが自由に選べる立場だったのでdraw.ioってのがすごい良かったという話。 公式サイト about.draw.io 何がいいの？ 無料である テンプレートが豊富である 矢印とかがサクサクきれいに連結できる ブラウザで使えるけどセキュリティが気になる・・がオフラインモードでも使える！！ はまったところ インストーラーが8.8.0.exeだけどインストールすると9.1.Xになっている ダウンロードするページによってインストーラ
draw.io (diagrams.net) の細かいテクニック - Qiita
みんな大好き draw.io (diagrams.net) の細かいテクニックです。 ちなみに、2020年2月あたりから、セキュリティ上の理由でサイトのドメインを diagrams.net に名称変更し始めているので、アクセス先はこちらに変更したりしましょう。 非圧縮XML形式のデフォルト化 ダイアグラムをファイル保存すると、デフォルトでは圧縮されたXMLになっていますが、これだと差分の確認・バージョン管理がしづらいです。 メニューの「拡張 (Extras)」->「圧縮 (Compressed)」のチェックを外すと非圧縮形式になるので、新しいファイルを作るたびにこれを実行しても良いのですが、忘れないように非圧縮XML形式をデフォルトにすると良いでしょう。 メニューの 拡張 (Extras) -> Configuration で開く設定ダイアログに以下を記載すると、アプリの再読み込み以降は非
【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜 - Qiita
draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。 「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です 😊 ※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメです。 ツイッター公式アカウント 公式ブログ ショートカット ショートカット集です。机の上に置いて覚えましょう。 Line / 線 まずは最も頻繁に使う Line(線)の使い方からご紹介します。 矢印をまっすぐに揃える ちまちまと矢印の線をドラッグして微調整し
VSCodeでDraw.ioが使えるようになったらしい！ - Qiita
追記 versionによっては設定を変えないとエクスポートができないようです。 エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。 現状バージョン0.4ではこちらの設定が必要となります。 VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 2020/10/18追記 現在のバージョン0.7ではdrawio拡張子のエクスポートがうまくいかないようです。 その場合はオフラインモードに移行変更していただくか、drawio.pngやdrawio.svg拡張子でファイルを作成してもらうことで直接編集もできた上で、エクスポートとせず末尾の拡張子ファイルとして利用することができます。 はじめに VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、 導入方法と使い方を備忘として残していきます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
draw.io
作図Webアプリ「draw.io」をLAN上に構築する – One IT Thing