タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。 「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です 😊 ※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメです。 ツイッター公式アカウント 公式ブログ ショートカット ショートカット集です。机の上に置いて覚えましょう。 Line / 線 まずは最も頻繁に使う Line(線)の使い方からご紹介します。 矢印をまっすぐに揃える ちまちまと矢印の線をドラッグして微調整し
追記 versionによっては設定を変えないとエクスポートができないようです。 エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。 現状バージョン0.4ではこちらの設定が必要となります。 VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 2020/10/18追記 現在のバージョン0.7ではdrawio拡張子のエクスポートがうまくいかないようです。 その場合はオフラインモードに移行変更していただくか、drawio.pngやdrawio.svg拡張子でファイルを作成してもらうことで直接編集もできた上で、エクスポートとせず末尾の拡張子ファイルとして利用することができます。 はじめに VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、 導入方法と使い方を備忘として残していきます。
ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など） - Qiita
※ 参考記事「PlantUML を VSCode で利用したいけど、プレビューが表示されずエラーが出る」 参考（PlantUML 導入後の編集中画面） 2-2. ER図 今回作成したER図 Qiita記事でも、コードブロック内でPlantUMLの構文がそのまま使えます。（このER図は、Qiitaのコードブロックで表示させています） 今回作成したER図のPlantUMLの表記 @startuml yonde ' hide the spot hide circle ' avoid problems with angled crows feet skinparam linetype ortho entity "families" as families { id -- name nickname introduction created_at updated_at } entity "users
VSCodeでDraw.ioをLive Shareしたら最高の体験だった - 弥生開発者ブログ
こんにちは、弥生のMisoca開発チームの黒曜(@kokuyouwind)です。 Kaigi on Railsの登壇が決まったのでよろしくおねがいします。弥生社員としては初登壇になります。 「おめでとうございます。 選考の結果、あなたのプロポーザルは採択されました！」 とのことなので、Kaigi on Railsお話しにいきますー— 黒曜 (@kokuyouwind) August 25, 2020 前回の記事が濃厚だったため、今回はライトなTips記事です。よろしくおねがいします。 tech.misoca.jp 👯♀️ VSCode LiveShareを使ったリモートペアプログラミング 皆さん、ペア作業してますか？ ペアプログラミングはドライバー・オペレータの交代など具体的なノウハウも多く、このブログでも以前に紹介記事を書きました。 tech.misoca.jp 上記の記事ではリモー
案件でAWSの構成図を作成する機会があったので備忘兼ねて投稿します。 ※約5分で読めます 1. グループの内側から作成していく AWSの基本的なグループ構成はこんな感じ 添付の場合、個人的には Public subnet or Private subnet > Availability Aone > VPC > Region > AWS Cloudの順番で作成することをオススメします。理由は内側のグループが肥大すると外側のグループの手直しが発生するためです。 今回作成した時に外側から作成してしまい、めっちゃ時間がかかってしまいました... 2. グループの左上を掴む 日本語が下手ですみません。 なぜ左上を掴まないといけないか？試しにPublic subnetをクリックしてドラッグをすると、添付の様になりました。 クリックをするとグループの外から選択されてしまうため、選択したグループ内に存在
Draw.io（diagrams.net）で作成したインフラ構成図をコードで管理する、GitHubで編集差分を確認する | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 Draw.io（diagrams.net）は、JGraph Ltdにより提供されているオンラインのダイアグラム作成サービスです。無料で利用可能です。 Diagram Software and Flowchart Maker 今回は、Draw.io（diagrams.net）で作成したインフラ構成図をコードで管理し、GitHubで編集差分を見る方法を確認してみました。 やってみた VS Codeプラグインの導入 Draw.ioの構成図のデータは、Draw.io Integrationというプラグインを使えばVisual Studio Codeで編集できます。とても便利なプラグインなので導入します。 Draw.io Integration - Visual Studio Marketplace Draw.ioで構成図を作成する Draw.io
VSCode拡張機能 Draw.io Integration導入方法 先人の方がまとめて下さってます。⇒ VSCodeでDraw.ioが使えるようになったらしい！ Draw.ioでsvg形式のファイルを作成する 拡張子を.drawio.svgまたは.dio.svgにしてファイル作成すると、Draw.ioに関連付けられ、svg形式のファイルを作画＆作成できます。 mdファイルにsvgを埋め込む mdファイルに以下のように作成した画像（.drawio.svg)を埋め込むことができます。 マークダウン構文またはimgタグで記述します。 mdファイルの編集画面からDraw.io画面を開ければ... マークダウン構文で記載した場合、画像ファイルを cmd + クリック で開くことはできますが... 残念ながら、テキストエディタが開いてsvgのソースが表示されます。 Draw.i
VSCodeがドローツールになるDraw.io Integrationがいい感じ！macOSでのワークアラウンドを紹介
Draw.ioというオンラインのドローツールがIDEのVisual Studio Code（VSCode）上で使えるようになったという報せを聞き及び、使ってみました。 具体的にはDraw.io IntegrationというExtensionがリリースされ、それをインストールするとDraw.ioがVisual Studio Code（VSCode）上で使えるようになります。 筆者は専らmacOSを使っていますので、macOS用のVisual Studio Code（VSCode）にDraw.io Integrationをインストールして使ってみたところ、Draw.io Integrationに関連づけられる.drawio、.dioといった拡張子のファイルを作成してもDraw.io Integrationが起動してこない。 ひょっとして機種依存の問題かとWindows版のVisual Stud
GitHub - hediet/vscode-drawio: This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
Draw.io VS Code Integration This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code. Mentioned in the official diagrams.net blog. Features Edit .drawio, .dio, .drawio.svg or .drawio.png files in the Draw.io editor. To create a new diagram, simply create an empty *.drawio, *.drawio.svg or *.drawio.png file and open it. .drawio.svg are valid .svg files that can be embe
プレゼンテーションや企画書などに挿入する模式図やフローチャートを描く際、どのようなツールを利用しているだろうか。「Microsoft Excel（エクセル）」や「Microsoft PowerPoint（パワーポイント）」を利用している、という人も多いと思う。Microsoft Office製品の中には、模式図などの描画に最適な「Microsoft Visio（ビジオ）」というツールもあるのだが、Officeスイーツとは別パッケージになっていることもあり、利用者はそれほど多くないようだ。 頻繁に模式図やフローチャートなどを描くのであれば、このVisioと似た機能を持つドローイングツール「draw.io」を利用することを薦めたい。「draw.io」は無償のドローイングツールで、JGraph社を中心にGitHubで開発が行われている（会員登録も不要で、商用利用に制限はない）。オンラインサービス
Microsoft VisioやDraw.io、Graphvizなど7つの「ソフトウェアアーキテクチャ視覚化ツール」をレビュー
Microsoft VisioやDraw.io、Graphvizなど7つの「ソフトウェアアーキテクチャ視覚化ツール」をレビュー：プロジェクトシナリオへの適合性を理解することが重要 TechTargetは、「ソフトウェアアーキテクチャ視覚化ツール」に関する記事を公開した。「Microsoft Visio」や「Draw.io」のような視覚化ツールは、ソフトウェアアーキテクチャの設計と管理に多くのメリットをもたらす。だが、重要なのは正しいツールを選択することだ。
お絵かき大好き、かめです。 あまり上手くはないのですが、最近は画用紙などに落書きして娘のおもちゃを作るのにハマっています。 はじめに 先日、 手順書を書くときに気をつけていること | DevelopersIO でも書きましたが、私は手順書を作成する際になるべくフロー図を書くようにしています。 前職では、フローといえば Visio を使っていたのですが、弊社では Visio を採用していないので、似た操作感のツールを探し、 Draw.io にたどり着きました。 今回はこちらをご紹介します。 Draw.io とは 弊社ブログ エンジニアのための無料で使えるドローイングツールまとめ | DevelopersIO などでも簡単に紹介されていますが、 Draw.io にアクセスするだけで利用できる無料のお絵かきツールです。 魅力1：豊富なテンプレート フローチャートだけでなく、ネットワーク図や ER
Draw.io Integration - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Draw.io VS Code Integration This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code. Mentioned in the official diagrams.net blog. Features Edit .drawio, .dio, .drawio.svg or .drawio.png files in the Draw.io editor. To create a new diagram, simply create an empty *.drawio, *.drawio.svg o
Motivation AWSの現状を楽に構成図に落とせたらいいよね、というモチベーション。 たまたま、CloudFormationのコードから draw.io で構成図を書く cfn-diagram というツールを見つけたので、aws -> cfn ->draw.io の流れができないか試してみる。
draw.ioはUML、ネットワーク図、ポンチ絵他、様々な図を掛けるWebツールで、最近はOfficeの代替お絵かきツールとしても活用が増えています。
すべての図をdraw.ioで管理するメリット
Table of Contents はじめに エンジニアにとって図を作成するのは日常茶飯事だと思います。 作成する方法は色々あります.. たとえば.. PowerPoint Google Slide Cacoo Gliffy Visio mermaid PlantUML ASCII art!! Excel!? とにかく色々あります。 GUIツールによる管理のメリット/デメリット GUIツールは直感的で図を描きやすいです。 しかし、管理面で作成したツールの保存形式でないとあとから編集しにくいというデメリットがあります。 バージョン管理面が課題に挙げられることもあります。 ただ、差分表示にこだわらなければ作成ツールのファイル形式をバイナリ管理することで実現できます。 テキストによる管理のメリット/デメリット GUIツールが持つ管理面のデメリットをテキスト管理は解消します。 mermaidやPl
みんな大好き draw.io (diagrams.net) の細かいテクニックです。 ちなみに、2020年2月あたりから、セキュリティ上の理由でサイトのドメインを diagrams.net に名称変更し始めているので、アクセス先はこちらに変更したりしましょう。 非圧縮XML形式のデフォルト化 ダイアグラムをファイル保存すると、デフォルトでは圧縮されたXMLになっていますが、これだと差分の確認・バージョン管理がしづらいです。 メニューの「拡張 (Extras)」->「圧縮 (Compressed)」のチェックを外すと非圧縮形式になるので、新しいファイルを作るたびにこれを実行しても良いのですが、忘れないように非圧縮XML形式をデフォルトにすると良いでしょう。 メニューの 拡張 (Extras) -> Configuration で開く設定ダイアログに以下を記載すると、アプリの再読み込み以降は非
GROWI に draw.io 連携機能を PR (Pull Request)して v3.7.0-RC としてリリースされた話 - Qiita
GROWI に draw.io 連携機能を PR (Pull Request)して v3.7.0-RC としてリリースされた話 はじめに GROWI に draw.io 連携機能を実装して Pull Request し、無事マージされて、バージョン 3.7.0 RC(Release Candidate) としてリリースされました！ (今は docker image のみ提供されてます) weseek/growi Add draw.io Integration #1685 使い方のドキュメントはこちらです。 draw.io で様々な図を作成する | GROWI Docs この記事では簡単な機能紹介と実装のモチベーション、どうやって実装したかなどをお話しようと思います。 GROWI って何？ 株式会社 WESEEK が OSS として開発している Markdown で書ける Wiki です。
draw.io を利用する３つの方法
システム構成図を書く時、ツール選びに悩むことってありませんか？ システム構成図に限らずとも、情報を分かりやすく表現する手段として、いわゆる「お絵かきツール」はとても需要があるのではないでしょうか。例えば Nulab の Cacoo だったり、MS Visio・Excel・PowerPoint だったりと、人によって・現場によって多種多様だと思いますが、今回はその中でも個人的によく使っている draw.io について紹介し、その使い方について共有したいと思います。 draw.io とは？システム構成図や図面等の作成に便利なお絵かきツールで、ブラウザ上で動くウェブアプリケーションです。オープンソース化（Apache License 2.0）されており、提供元 JGraph の GitHub リポジトリにてソースコードが公開されています。 公式サイトがあるので、合わせてチェックしてみてください。
Draw.ioとは そもそもDraw.ioとは何かというと、無料で利用できる高機能作図ツールです。 特徴としては、ブラウザ上で利用でき、様々な種類のテンプレートを参考にしながら、 マウス操作などで簡単に作図ができるというのが最大の特徴になっています。 また、GoogleDriveやGitHub、ローカルなど保存先を選ぶことができ、 シェア用のURLを発行したり、画像を出力したりして関係者に共有することもできます。 VSCode Draw.io Integration 「VSCode Draw.io Integration」は、エディタであるVSCode上でDraw.ioを使用できるようする拡張機能です。 VSCode上に、Draw.io Integrationをインストールすることにより、ブラウザ上でのDraw.ioと同じような形で作図をすることができます。 インストールはこちらから。 何
GitHub - mhlabs/cfn-diagram: CLI tool to visualise CloudFormation/SAM/CDK stacks as visjs networks, draw.io or ascii-art diagrams.
Usage: cfn-dia [options] [command] Options: -v, --vers Output the current version -h, --help Display help for command Commands: draw.io|d [options] Generates a draw.io diagram from a CloudFormation template html|h [options] Generates a vis.js diagram from a CloudFormation template browse|b [options] Browses and generates diagrams from your deployed templates help [command] Display help for command
VS Code / プラグインを活用したDraw.ioの便利な使い方 | フューチャー技術ブログ
概要Draｗ.io（Diagrams.net）はとても便利ですが、VScodeやプラグインと組み合わせるとさらに便利になります。 特に便利と感じた機能を紹介します。 VS Code プラグインここ数年、GitHubでドキュメント（Markdown）を管理するケースが増えており、Markdownに埋め込む編集可能な図として、Draｗ.ioのメタ情報を埋め込んだ画像を利用しています。 当初、ブラウザ（もしくはデスクトップ版）を利用していたのですが、こちらのプランを利用すると、VSCodeから直接png/svgをDraｗ.ioで表示・編集・画像保存が可能となり、とても便利です。 https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio Draｗ.io プラグイン公式でもブログでサラッと紹介してあるのみですが、
AWS構成図をパパッと作ろう！─ diagrams.net (draw.io) をさわってみた | AWS運用最適化サービス cloud link (クラウドリンク)
AWS構成図をパパッと作りたい！！！AWS環境の構成図って作成に時間がかかりませんか？ AWS公式ページから ツールキット をダウンロードして、目当てのアイコンを探して、コピー&ペーストして、あぁっ矢印がズレた...なんてこともしばしば。もっと簡単に作りたい！そんなあなたに耳寄りな情報です！ 本ブログでは、AWS公式ページでも紹介されているダイアグラム作成ツール「diagrams.net (draw.io)」をご紹介します。
はじめに pythonで作ったネットワーク図をdraw.ioで編集したい人向けの記事です。 ①networkxでグラフのもとになるdotフォーマットのデータを作って、 ②それをgraphviz2drawioを使ってDraw.ioで使える形式(xlm)で出力します 今のところ、とりあえず出来た、というだけですが、環境づくりに苦労したので、同じような沼にはまる人がいないといいなと思って書きます。 最後にはこういうものが出来上がります。 （VSCodeの拡張機能、Draw.io Integrationで表示しています） ハマった点 Graphvizで描画するのに使うGraphvizのパッケージと、graphviz2drawioを使うためのGraphvizのパッケージが異なる。環境を別にしないとエラーになってしまう。 Graphviz単体でインストールして使うことを前提としたパッケージと、パッケー
気持ちよく手軽に図を描ける無料ツール「diagrams.net」（旧draw.io） - karaage. [からあげ]
図を手軽に無料で書きたい 仕事でもプライベートでもたまにつかいたくなるのが作図ツールですね。ドキュメントを書くとブロック図、フローチャート等様々な図が必要となります。 仕事だと、昔（回路設計をしていたころ）はVisioを使っていました。ただ、Visioはそれなりにお高いですし、Visioを周りの人が使っていないと、布教から導入までが大変そうですね。下手したらその間にプロジェクトが終わってしまうかもしれません。 また、個人で使いたいと思ってもなかなかこの手のソフトは個人で買う気は起こりませんね。特にVisioは基本的にWindows向けなので、MacやLinuxで使う場合も困りそうです。そんなときの強い味方が、マルチプラットフォームで無料で使える作図ツールです。 というわけでおすすめのもの、特に「diagrams.net（draw.io）」を中心に紹介したいと思います。 diagrams.n
![気持ちよく手軽に図を描ける無料ツール「diagrams.net」（旧draw.io） - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6b714d0951f80aa199667457b923310c52e783c6/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20211024%2F20211024120847.png)
Draw.io VS Code Integration - Visual Studio Codeでドローイング MOONGIFT
Draw.ioを使えばUMLやシステム図などのドローイングができます。データは画像やSVGで出力できるので、開発用のドキュメントに使っている人も多いのではないでしょうか。インストールしておくと、利用場面が多いはずです。 そんなDraw.ioをVisual Studio Codeの中に追加してしまうのがDraw.io VS Code Integrationです。Visual Studio Codeを使っている人にとってはとても便利な機能拡張です。 Draw.io VS Code Integrationの使い方 .drawioといった拡張子のファイルを開くと自動認識されます。 左側からパーツを選んでドラッグ&ドロップで配置します。 SVGやPNGで保存もできます。 Draw.io VS Code Integrationを使えばVisual Studio Codeの中から出ることなくドローイング
きっかけ 最近、プリセールスを手伝うことが多く、そのため、アプリアーキテクチャ、インフラ構成図をよく書いています。 まずExcelで作成して、レビューOKになったものを提案書用にPPTに修正して、、、という二度手間が発生していたので、同じ形式できれいに作れないかと検索した結果、Draw.ioに行きつきました。 前提 VSCodeインストール済み 構築手順 Draw.io Integrationプラグインの導入 構成図作成 ファイル出力 1.Draw.io Integrationプラグインの導入 以下リンクでInstallを押下するか、VSCodeのプラグイン検索で"Draw.io"で検索するかでDraw.io Integrationのインストールを実施する。 (インストール後、VSCodeの再起動を推奨) 2.構成図の作成 .drawioなどDraw.ioに関係する拡張子を持つファイルを作
はじめに Redmine のチケットや Wiki にちょっとした図を埋め込みたいときって、皆さんどのようにされていますでしょうか？いちいち描画ツールを起動して、図を描いてファイル保存してアップロードするのも面倒ですよね。最新の Redmine 4.1 でしたらクリップボードから直接貼り付けることができますし、それ以前のバージョンでも Redmine clipboard_image_paste plugin を使えば同じことができますが、それでも描画ツールを起動する手間はかかります。 ところで皆さん、描画ツールは何を使っていますか？僕は draw.io （今は diagrams.net に変わろうとしているそうです1 ）を好んで使っています。ブラウザ上でいろんな図を描くことができる優れものです。でも、このツールを使って描いた図を Redmine に貼り付けるときには、ファイルかクリップボード
diagrams.net（Draw.io）でキレイなフローチャートを描こう | ホームページ制作・Webマーケティング｜株式会社SPC
システム開発業務において、複雑な処理はフローチャートを書き起こすことで認識を整理・共有しやすくなり、開発を効率化できます。 しかし、いざ作図しようにもツール選びで迷ってしまいます。探せばWebツールでもフリーソフトでも出てきますが、作業量としてはそれなりのものになりますし、ツール間の互換性も基本的にないため、失敗したと思っても後からの乗り換えは難しいです。ツールの検証にリソースを割くことも難しいため、結果的に作図そのものが見送られがちです。 そこで今回おすすめしたいツールが「diagrams.net」です。 diagrams.net 元々は「Draw.io」という名称でしたが、2020年2月から「diagrams.net」へ段階的に改名しています。現時点では「Draw.io」名義のほうが認知度は高いので、情報を調べる際は「Draw.io」で探したほうがいいかもしれません。 作図にdiagr
どうも、Tです。 エンジニアたるもの、無職になろうとも何か作るときにはドキュメントを書くものです。 フローチャート、ネットワーク図、接続図、UML、ワイヤーフレーム、サイトマップ、ER図などなど。 無職しながら、こつこつ作成したいものの構想をだしている最中ですが、ツールがない！ このあたりを作成するのに、Microsoft Office Visioが結構使われているわけですが、およそ5万円。個人で購入するにはかなり躊躇する値段です。 そこで探して、試していきついたのが、draw.ioでした。 https://www.draw.io/ 仕事でVisioを使っていた僕の観点で、draw.ioのいいところ・悪いところを確認してみました。ちなみに僕が最後に使ったのはVisio2010なので相当古いです。 draw.ioとは？ Web上でフローチャートなどを作成できるWebアプリです。 Visioの
Front makes you look at things from a different perspectives. You can create a wide variety of diagrams for many different industries using draw.io with our extensive template library and vast shape libraries. Open a diagram: Click on a diagram image on this page to enlarge it in our online app.diagrams.net viewer. Click on the pencil in the viewer toolbar to open it in the editor. Learn more abou
企業ネットワークの管理に欠かせないのがネットワーク図だ。社内に設置したルーターやファイアウオールなどのネットワーク機器や、それらがデータをやりとりするためのルーティングプロトコルなどを一覧できる。特にトラブル発生時の原因究明に重宝する。 PowerPointなどのオフィスソフトを使うケースが多いだろうが、ネットワーク図を作製できるWebサービスもある。無料で使うことができ、サービスによってはネットワーク図のテンプレートを用意している。ぜひ試してほしい。 「Draw.io」 ネットワーク図を作製できるWebサービス （https://www.draw.io/） Draw.ioはネットワーク図を手軽に作製できるWebサービスだ。Draw.ioのWebサイトにアクセスすると、作製するネットワーク図を保存する場所を選択する画面が表示される。アクセスしたパソコン内だけでなく、GoogleドライブやO
TL;DR こちらの記事 「Draw.ioで作成した図をWordに挿入する」 の補足版。 前回にうまくやれたにもかかわらず２回目に同じことをしようとして沼にハマったので、自分用のメモでもあります。 目的とゴール プレゼン用資料作成などでPowerPoint（パワポ）にdraw.ioで設計した図などを転載する場合は多いと思います。 画像としてキャプチャをコピペしてもよいのですが、文言や微妙な位置修正などする場合、パワポでいじれるオブジェクトにしたいと思いますが、単純にコピー＆ペーストしてもうまく行きません。 ここでは以下、パワポでいじれるオブジェクトにするやり方を解説します。Macで確認しましたが Windows は時間があったら確認してみますのでまずはご容赦を。 サンプルとして次のような図を用いてみました（A4サイズ）。 手順 元記事では、SVGにしたあと、inkspaceを使ってemfへ
Pythonの勉強がてら、xml.etree.ElementTreeを使ってXMLをパースしてみました。 やりたいこと draw.ioで描いたER図を解析して、テーブル名、主キー、その他のカラムを分けてCSVで出力することです。 draw.ioのままでは解析できないので、XMLで出力してから解析します。 XML draw.ioのER図は以下のような図です。 これをXMLで出力したもの (一部抜粋) <mxCell id="C-vyLk0tnHw3VtMMgP7b-12" value="" style="edgeStyle=entityRelationEdgeStyle;endArrow=ERzeroToMany;startArrow=ERone;endFill=1;startFill=0;" parent="1" source="C-vyLk0tnHw3VtMMgP7b-3" target
[小ネタ]Draw.io（diagrams.net）で図形のサイズが連動して変わらないようにする | DevelopersIO
はじめに ネクストモードの南です。 AWSの構成図を作成する際にDraw.io（diagrams.net）を使用するケースは多いと思います。 私も普段AWSの構成図を作るときにはDraw.ioを使っています。 先日Draw.ioを使っていて困ったことがあったので、小ネタとして紹介させていただきます。 困っていたこと このようにサブネットとVPCのグループの図形をまたぐ形で、別のグループ（Client VPN）の図形を重ねたかったわけですが 実際に重ねてみると自動的にサブネットとVPCのグループの図形が連動して広がる、という動作をしてしまいます。 とりあえず配置してから下層のグループの図形を元に戻してもいいのですが、なかなか手間です。 解決方法 まず、自動的にサイズが変わってほしくない図形を選択します。 右ペインから「スタイル」のタブを選択し、プロパティの三角アイコンをクリックして項目を展開
ペーパーレスでデータベース設計ができる！ 題名のとおりで、無料で使えるドローツール「draw.io」を使えば、ERD(E-R図)設計に役立ちます！ https://www.draw.io/ はじめに ページを開くと、最初に保存するストレージを洗濯する画面が出てきます。 これは好みの物を使えばOKですが、ここでは「Google Drive」を使って進めていきます。 そしたら、次のような画面が出てきますので、 今回は新しくcreaet new diagramを選びましょう。 特にこれといった指定はないので、「基本」の白紙ファイルを選び、作成しましょう。 この時、上のダイアグラム名を任意のものに変更しておきましょう。 ちなみにテンプレートもあるので、それらを元に編集すると作業効率化が計れるかも？です。 ※作成したあと、Use root folder?と聞かれたら、そのままOKで大丈夫です。 さっ
draw.ioでAlibaba Cloudアーキテクチャ図を描こう｜Engineers' Blog｜SBクラウド株式会社 - SBクラウド株式会社
はじめに こんにちは、エンジニアの佐藤です。 久しぶりのTechBlog投稿になります。 今回はdraw.ioを使ってAlibaba Cloudのアーキテクチャ図を描く方法をご紹介したいと思います。 ※説明はいいからすぐに使いたい！という方は、こちら draw.ioって？？ draw.ioとは、英JGraph社が提供するオープンソースのオンライン作画ツールです。 フローチャートやUML図等を無料で、綺麗に、そして簡単に作成することが出来ます。 例えば、以下のような画像をオンライン上で作成可能です。 サンプル画像①サンプル画像② 特徴 draw.ioをオススメする理由は大きく3つあります。 拡大しても画質が劣化しない！ コネクタが自由自在！！ テンプレートが豊富！！！ 拡大しても画質が劣化しない！ draw.ioで用いられる各種Shapes（アイコン画像）はSVG（Scalable Vect
Draw.ioで作った図を、Office系とかGoogle Workspace系で編集できる状態でインポートできないかな
Draw.ioで作った図を、Office系とかGoogle Workspace系で編集できる状態でインポートできないかな 概要 UMLとかER図とかを描くのにdraw.ioを使いたいけど、ツールを使いたがらない勢力がいるのでofficeとかGoogle workspaceで編集できる状態でインポートできないかしら。 Office系でできたらしき情報があったが WordでSVGインポートできる記事があったが、なんか罫線が消えちゃったんだよなあ。 上記の記事より古い情報だが、Inkscapeでemfにする方法。
こんにちは。たかやまです。 私は基本ダークモードを使っています。GitHubのテーマももちろんダークモードです。 こんな私の環境でDraw.ioで作図した画像をGitHubで見ようとすると... こんな感じでなんだかわからない感じになっていました。 小ネタですが、ダークテーマな環境で見やすくするために画像の背景を変える手順を今回ブログにしようと思います。(透過画像だとダークテーマには見ずらいことを伝えるのが真意) やりたいこと こうじゃなくて ↓ こう やること 至極単純で、右ペインのダイアグラムで背景を有効化してカラーコードFFFFFFを設定します。 この状態でエクスポート*1してもらえれば、いい感じにオブジェクトの範囲で背景色がついた状態になります。 1 vscodeであれば拡張子drawio.svgを使うことでエクスポート不要で便利 Tips 背景色を設定した場合、オブジェクトのある
概要 draw.io（diagrams.net）を利用して、画面仕様を作成して、エンジニアたちと共有するメリットについてまとめてみました。 Diagram Software and Flowchart Maker draw.ioって何？って方は下記の記事など参考にしてください。 Draw.ioの導入方法と日本語化 背景 顧客から提供される画面案、デザイナーから提供されるモックアップ（もしくはそれらを実現したHTML/CSS等）は、「デザイン・見た目・それらに対する想い」を理解するのには、大変有益なものですが、実際に実装しようとする場合には、情報が不足していることが多くあると思います。 画面の動きや表示条件に関すること、チェックすべき内容やサイズ・色に関することなど、上記の画面案・モックアップとは別に画面に関する仕様書を作成して、実際に手を動かすエンジニアと共有していく必要があります。 私も
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜 - Qiita
VSCodeでDraw.ioが使えるようになったらしい！ - Qiita
draw.ioを使ってAWSの構成図を作成するコツ - Qiita
VSCode上のマークダウン とDraw.ioでドキュメントを作成する - Qiita
プレゼンで差をつける無料のチャート（図表）作成ツール「draw.io」 はじめの一歩
Draw.io でフローチャートを書いてみよう！ | DevelopersIO
aws -> cfn ->draw.io を試す
作図Webアプリ「draw.io」をLAN上に構築する – One IT Thing
draw.io (diagrams.net) の細かいテクニック - Qiita
VSCode Draw.io Integrationがさらに便利になってた
Pythonだけで簡単に！Graphvizの図形をdraw.io形式で出力する！ - Qiita
【AWS】Draw.io + VScodeでAWS構成図を書く - Qiita
Redmine draw.io plugin がすごい便利そうなので紹介したい - Qiita
【Visio代替ソフト】Visioがないなら、draw.ioを使えばいいじゃない？
Example draw.io diagrams and templates
ネットワーク図をブラウザー上で簡単作製、Draw.ioとGliffy Diagramsを使いこなす
Draw.ioで作成した図をPowerPointにコピペする - Qiita
PythonでDraw.io(XML)を解析 - Qiita
【便利ツール紹介】Draw.ioを使ってERDを書いてみよう - Qiita
Draw.ioでエクスポートする画像に背景色をつける | DevelopersIO
draw.ioで画面仕様を作ろう - Qiita
www.tokyo-np.co.jp
business.nikkei.com
matomedane.jp
ascension.hateblo.jp
minomushi0713.hatenablog.com
esukekun.hatenablog.com