1 - 33 件 / 33件
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
3.7 sonnet → drawioが今のところベストな図の作成方法。特にdrawioにすることで修正ができることが従来との違い。パワポ作成やブログなどの際に図を多用できる。これはわかりやすくビジネスマン全員が使える組み合わせ。 https://t.co/GzZRYhgt1V pic.twitter.com/xmWryTqnk6 — 遠藤巧巳 - AIエージェント受託開発 (@ai_agent_dev) March 1, 2025 図の作成のベストは2025年3月時点ではClaude3.7 sonnetです。ChatGPT,Geminiでもできますが、クオリティが低いと人の修正時間が増えます。この図の作成クオリティのためだけにClaudeを契約しても良いと思います。 何が違う?これまでは図の作成はsvgで行うことが普通でした。しかしsvgだと人の修正ができないため、ほんの少しの違和感でも
はじめに ご無沙汰しております。Cursor→Claudeとコスって開発PMを日々やっている中で、何を発信してよいやら迷走した1ヶ月でしたが復活しました。結局のところ、Tipsとプロンプトかなあというところに思い至りまして、そのまま使えずとも、「こんなことに使えるんだあ」という気付きになれば幸いです。 Claudeと言いつつ、ChatGPTでもGeminiでも行けるっちゃいけるんですが、Opusがやっぱり優秀なのでClaudeでやっています。 概要:ワークフロー図づくりで"詰む"前に── 「フロー図描いてって軽く言われたけど、そもそも何を聞けばいいんや......」――そんな若手の悲鳴を(また)聞きまして、プロンプトで一撃解決できんかと作ってみました。 「プロンプトはそのまんま載せてます。コピペして即生成AIに突っ込めば動くはず。 こんな感じのフローが簡単に作れるはずです 目次 なんでプロンプト?
こんにちは。たかやまです。 いままでいくつものIaCツールをベースにAWS構成図作成する作図ツールがでているかと思います。 ただ、これらは独自ツールでユーザー側で編集できないものだったり、作成された構成図のエクスポート先がPDFやPNGだったりと、後から修正や更新がしにくいという課題があります。 私は普段draw.ioやCacooを使ってAWS構成図を作成しています。 日々新しい生成AIモデルが登場していますが、draw.ioはXML形式で構成図が定義されるため、生成AIでも扱いやすいのではないかと考えました。 実際に試してみたところ、想定以上に高品質なAWS構成図を作成してくれたので今回はそちらをご紹介します。 さきにまとめ CDKやCloudFormation、Terraformのコードから直接構成図を生成できる モデルはClaude 3.5 Sonnet以上がおすすめ Anthrop
AWSを使っている方なら、dwar.ioを使って構成図を書く機会が結構あると思います。構成図を書く時のイラッとをなくすレイヤーという機能を知ったのでご紹介したいと思います。え?今更知ったの?そんなの知ってるよ。と言われちゃうかもですが、ご紹介させてくださいませ。 その前に、構成図書く時にどう書いたら良いんだろう、、、となる時ありますよね。参考にしている良い記事あるのでご紹介させてください。今まで結構雰囲気で書いていたのですが、この記事を見てから綺麗にかけるようになりました。 AWSのアーキテクチャ図を描くときに意識していること それではレイヤーのお話に行きたいと思います。ECSコンテナを編集したい場合、まずレイヤーを使っていないときは、こうなりますよね。 邪魔なのをどかしてどかして、やっと編集できます。次回すぐ編集できるように最前面に移動することもあるかと思います。これレイヤーを使うとこん
はじめに データベース設計のER図について、VSCodeなどで作成する以下3つの方法を比較した記事です。 Draw.io PlantUML Mermaid 以前、Webアプリケーションを作成した際には、 Draw.io を使用して、作図しました。 (そのアプリのER図を今回サンプル図としています) 最近、 PlantUML を利用するようになり、ER図や、シーケンス図、クラス図の作図に利用しているのですが、とても編集しやすいと感じています。 ただ、どのツールにも、一長一短あるかと思いますので、それぞれ以下目次の内容を書いて、ご紹介したいと思います。 目次 1. Draw.io 1-1. VSCodeでの使い方 1-2. ER図 1-3. 感想 2. PlantUML 2-1. VSCodeでの使い方 2-2. ER図 2-3. 感想 3. Mermaid 3-1. VSCodeでの使い方
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 案件でAWSの構成図を作成する機会があったので備忘兼ねて投稿します。 ※(注記)約5分で読めます 1. グループの内側から作成していく AWSの基本的なグループ構成はこんな感じ 添付の場合、個人的には Public subnet or Private subnet > Availability Zone > VPC > Region > AWS Cloudの順番で作成することをオススメします。理由は内側のグループが肥大すると外側のグループの手直しが発生するためです。 今回作成した時に外側から作成してしまい、めっちゃ時間がかかってしまいました..
はじめに こんにちは!ソフトウェアエンジニアの種岡です。 皆さん、システム設計に取り組んでいますか? 設計は、プロジェクト成功への道筋を描く、航海の羅針盤です。 目的地を見据え、それに向かって進むための確かな指針となります。 設計の質がしっかりしていれば、開発という大海原でも迷わず進むことができます。 設計はプロジェクトの土台を築く、創造的かつ重要なプロセスです。 夢を描き、それを形にする試行錯誤の楽しさ、これこそが設計の魅力だと思います。 この記事は秋の技術特集 2024の11記事目です。 この記事 is 何? この記事では、設計図を描く際の心構えと、誰でも見やすい設計図を作成するためのテクニックについてお話しします。 なぜ設計図を書くのか? 図は複雑な情報を視覚的に整理し直感的な理解を推進することができるため チーム内外での共通理解を促進し、コミュニケーションを円滑にするため 予測可能
はじめに今回は、Cursorで業務フローをdraw.ioで可視化し、n8nのワークフローを作成するまでの流れを自動化するシステムの構築方法をご紹介します。 このシステムでは対話形式で要件を整理し、段階的にフロー図やn8nのワークフローを作成できます。 このシステムでは、精度高く、n8nのワークフローを構築してくれますが、ノードの細かな設定部分は人間が修正する必要はあります。 ただし、今後のLLMの精度向上に従って、よりn8nワークフロー作成精度の向上も期待できます。そのため、LLMで作成することを前提としたシステムを作成しておくことは非常に便利だと考えられます。 システムの概要このシステムは4つの段階でフロー図やn8nのワークフローを作成します。 対話形式でのヒアリング → 構造化された要件定義書を自動生成 要件定義書 → 中間設計書(DSL)を自動変換 中間設計書 → Draw.io形式
プレゼンテーションや企画書などに挿入する模式図やフローチャートを描く際、どのようなツールを利用しているだろうか。「Microsoft Excel(エクセル)」や「Microsoft PowerPoint(パワーポイント)」を利用している、という人も多いと思う。Microsoft Office製品の中には、模式図などの描画に最適な「Microsoft Visio(ビジオ)」というツールもあるのだが、Officeスイーツとは別パッケージになっていることもあり、利用者はそれほど多くないようだ。 頻繁に模式図やフローチャートなどを描くのであれば、このVisioと似た機能を持つドローイングツール「draw.io」を利用することを薦めたい。「draw.io」は無償のドローイングツールで、JGraph社を中心にGitHubで開発が行われている(会員登録も不要で、商用利用に制限はない)。オンラインサービス
ネットワーク図を描くにはツールの活用が欠かせない。簡単な図であれば、米Microsoft(マイクロソフト)の「PowerPoint」や「Excel」を使う技術者が多いようだ。 一方、大規模ネットワークの図を描く技術者の多くは作図専用ツールを活用している。そこで物理構成図に強いといった「個性」を持つツールを4つ紹介しよう。 「飛び越し点」で線の交差を識別 Microsoftの「Visio(ビジオ)」は、1990年代から続く歴史ある作図ツールの1つ。大規模ネットワークを構築するインテグレーターなどの技術者から根強い支持がある。TISの後藤崇夫IT基盤エンジニアリング第1部チーフは「設計フェーズで使う詳細な物理構成図を描くときに使い勝手が良い」と説明する。 大規模ネットワークの物理構成図は機器同士を結ぶ線が交差しやすく、機器同士の接続状況を区別しにくくなる。設計フェーズで機器同士の接続を誤ると、
こんにちは!かねごん(@hrbk25)です! この記事では、少し前からSNSで話題になっていた「Claudeを使って、draw.ioのXMLを作ってもらう」という内容を、身近な内容とAIアシスタントツールを使って試してみましたので、その内容を備忘録として残しておきます。 どんな人向けの記事か システム構成図などの図を効率的に作成したい方 draw.ioを普段活用している方 AI(NotebookLM、Claude)による図の自動生成に興味がある方 やったこと 今回は、kintoneの営業支援パックを公式サイトの情報から、NotebookLMとClaudeを活用してdraw.ioでシステム構成図を自動生成してみました。 kintone営業支援パックとは 本アプリパックは営業で顧客や案件、商談の管理をすることを目的に構成されたサンプルのアプリパックです。 NotebookLMとは Google
ソフトウェアアーキテクチャ視覚化ツールは、アプリケーション開発とソフトウェアアーキテクチャ管理を成功させるために不可欠な要素だ。グラフィックを使ったコード表現やシステムの関係図など、視覚化はソフトウェアチームにプロジェクトの共通の青写真(将来予測、構想)を提供し、個々のモジュールの内訳を明確に定義し、アプリケーションの機能を動的に文書化する。 ただし、視覚化ツールを選定する際に、そのツールの際立つ長所、潜在的な弱点、そして特定のプロジェクトシナリオへの適合性を理解することが重要だ。 そこで本稿は、有料サブスクリプションやオープンソースツールを含め、視覚化ツールのさまざまな選択肢を評価して順不同で紹介する。なお、基となる情報はプロバイダーの情報ページと他の独立系情報源から集めており、どの視覚化プロバイダーからも影響を受けていない。また、紹介するツールにランクは付けずに紹介している。 Ente
Motivation AWSの現状を楽に構成図に落とせたらいいよね、というモチベーション。 たまたま、CloudFormationのコードから draw.io で構成図を書く cfn-diagram というツールを見つけたので、aws -> cfn ->draw.io の流れができないか試してみる。
Draw.ioとは そもそもDraw.ioとは何かというと、無料で利用できる高機能作図ツールです。 特徴としては、ブラウザ上で利用でき、様々な種類のテンプレートを参考にしながら、 マウス操作などで簡単に作図ができるというのが最大の特徴になっています。 また、GoogleDriveやGitHub、ローカルなど保存先を選ぶことができ、 シェア用のURLを発行したり、画像を出力したりして関係者に共有することもできます。 VSCode Draw.io Integration 「VSCode Draw.io Integration」は、エディタであるVSCode上でDraw.ioを使用できるようする拡張機能です。 VSCode上に、Draw.io Integrationをインストールすることにより、ブラウザ上でのDraw.ioと同じような形で作図をすることができます。 インストールはこちらから。 何
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
きっかけ 最近、プリセールスを手伝うことが多く、そのため、アプリアーキテクチャ、インフラ構成図をよく書いています。 まず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に関係する拡張子を持つファイルを作
目的とゴール プレゼン用資料作成などでPowerPoint(パワポ)にdraw.ioで設計した図などを転載する場合は多いと思います。 画像としてキャプチャをコピペしてもよいのですが、文言や微妙な位置修正などする場合、パワポでいじれるオブジェクトにしたいと思いますが、単純にコピー&ペーストしてもうまく行きません。 ここでは以下、パワポでいじれるオブジェクトにするやり方を解説します。Macで確認しましたが Windows は時間があったら確認してみますのでまずはご容赦を。 サンプルとして次のような図を用いてみました(A4サイズ)。 手順 元記事では、SVGにしたあと、inkspaceを使ってemfへ変換していたが、現在はSVGから加工ができる。1 draw.io で SVG でエクスポート Word でその SVG を埋め込む Word 上で「グループ解除」する PowerPoint へコピー
概要Draw.io(Diagrams.net)はとても便利ですが、VScodeやプラグインと組み合わせるとさらに便利になります。 特に便利と感じた機能を紹介します。 VS Code プラグインここ数年、GitHubでドキュメント(Markdown)を管理するケースが増えており、Markdownに埋め込む編集可能な図として、Draw.ioのメタ情報を埋め込んだ画像を利用しています。 当初、ブラウザ(もしくはデスクトップ版)を利用していたのですが、こちらのプランを利用すると、VSCodeから直接png/svgをDraw.ioで表示・編集・画像保存が可能となり、とても便利です。 https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio Draw.io プラグイン公式でもブログでサラッと紹介してあるのみですが、
システム開発業務において、複雑な処理はフローチャートを書き起こすことで認識を整理・共有しやすくなり、開発を効率化できます。 しかし、いざ作図しようにもツール選びで迷ってしまいます。探せばWebツールでもフリーソフトでも出てきますが、作業量としてはそれなりのものになりますし、ツール間の互換性も基本的にないため、失敗したと思っても後からの乗り換えは難しいです。ツールの検証にリソースを割くことも難しいため、結果的に作図そのものが見送られがちです。 そこで今回おすすめしたいツールが「diagrams.net」です。 diagrams.net 元々は「Draw.io」という名称でしたが、2020年2月から「diagrams.net」へ段階的に改名しています。現時点では「Draw.io」名義のほうが認知度は高いので、情報を調べる際は「Draw.io」で探したほうがいいかもしれません。 作図にdiagr
AWS構成図をパパッと作りたい!!!AWS環境の構成図って作成に時間がかかりませんか? AWS公式ページから ツールキット をダウンロードして、目当てのアイコンを探して、コピー&ペーストして、あぁっ矢印がズレた...なんてこともしばしば。もっと簡単に作りたい!そんなあなたに耳寄りな情報です! 本ブログでは、AWS公式ページでも紹介されているダイアグラム作成ツール「diagrams.net (draw.io)」をご紹介します。
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
図を手軽に無料で書きたい 仕事でもプライベートでもたまにつかいたくなるのが作図ツールですね。ドキュメントを書くとブロック図、フローチャート等様々な図が必要となります。 仕事だと、昔(回路設計をしていたころ)はVisioを使っていました。ただ、Visioはそれなりにお高いですし、Visioを周りの人が使っていないと、布教から導入までが大変そうですね。下手したらその間にプロジェクトが終わってしまうかもしれません。 また、個人で使いたいと思ってもなかなかこの手のソフトは個人で買う気は起こりませんね。特にVisioは基本的にWindows向けなので、MacやLinuxで使う場合も困りそうです。そんなときの強い味方が、マルチプラットフォームで無料で使える作図ツールです。 というわけでおすすめのもの、特に「diagrams.net(draw.io)」を中心に紹介したいと思います。 diagrams.n
まえがき プログラミングな作業をしていると、プログラムから図面に起こしたい的な欲望が湧くときがあるような気がします。 位置をあまり気にしなければmermaidなどの出力でいいはずですが、 そこから手で調整を加えたい時があります。 強力な作図ツールといえば、drawioはXMLなので、それで変更しようと思ったりしますが、 drawioのXMLにはメタ情報が含まれているので手動での編集が難しかったりします。 そこで、方法を探してみると、ありましたので、書いてみます。 diagrams.netの基本情報 旧draw.ioです。 なお、.ioドメインからはセキュリティの事情により移行するようです。 メニュー位置 メニュー位置はArrange>insert>Advancedになります。 From Text テキスト(List) 結果 テキスト(Diagram) 結果 PlantUML 現状はエラーが
どうも、Tです。 エンジニアたるもの、無職になろうとも何か作るときにはドキュメントを書くものです。 フローチャート、ネットワーク図、接続図、UML、ワイヤーフレーム、サイトマップ、ER図などなど。 無職しながら、こつこつ作成したいものの構想をだしている最中ですが、ツールがない! このあたりを作成するのに、Microsoft Office Visioが結構使われているわけですが、およそ5万円。個人で購入するにはかなり躊躇する値段です。 そこで探して、試していきついたのが、draw.ioでした。 https://www.draw.io/ 仕事でVisioを使っていた僕の観点で、draw.ioのいいところ・悪いところを確認してみました。ちなみに僕が最後に使ったのはVisio2010なので相当古いです。 draw.ioとは? Web上でフローチャートなどを作成できるWebアプリです。 Visioの
Draw.ioで作った図を、Office系とかGoogle Workspace系で編集できる状態でインポートできないかな 概要 UMLとかER図とかを描くのにdraw.ioを使いたいけど、ツールを使いたがらない勢力がいるのでofficeとかGoogle workspaceで編集できる状態でインポートできないかしら。 Office系でできたらしき情報があったが WordでSVGインポートできる記事があったが、なんか罫線が消えちゃったんだよなあ。 上記の記事より古い情報だが、Inkscapeでemfにする方法。
Professional Diagram Conversion Service What is Image to Draw.io?Draw.io is the world's most popular free diagramming software - millions use it daily for flowcharts, architecture diagrams, and technical drawings. But what happens when you have a diagram trapped in an image? That's where our Image to Draw.io service comes in. We help you convert images into Draw.io format, so you pay us just once
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
はじめに ネクストモードの南です。 AWSの構成図を作成する際にDraw.io(diagrams.net)を使用するケースは多いと思います。 私も普段AWSの構成図を作るときにはDraw.ioを使っています。 先日Draw.ioを使っていて困ったことがあったので、小ネタとして紹介させていただきます。 困っていたこと このようにサブネットとVPCのグループの図形をまたぐ形で、別のグループ(Client VPN)の図形を重ねたかったわけですが 実際に重ねてみると自動的にサブネットとVPCのグループの図形が連動して広がる、という動作をしてしまいます。 とりあえず配置してから下層のグループの図形を元に戻してもいいのですが、なかなか手間です。 解決方法 まず、自動的にサイズが変わってほしくない図形を選択します。 右ペインから「スタイル」のタブを選択し、プロパティの三角アイコンをクリックして項目を展開
はじめに Draw.ioを使っていて、レイヤーの挙動に悩まされることが多かったので、自分なりにまとめてみました。 環境 2021年12月23日 時点 VSCode Ver1.62.2 Drawio Integration Ver1.6.3 レイヤー機能 Draw.ioでは図形を各層ごとに分ける機能(レイヤー機能)が備わっており、この機能を上手に使うことで複雑なモデルの作成が容易になります。 こちらにレイヤー機能について詳しく載っています。 カキノタblog 他のレイヤーから図形を複製した時 複製された図形は選択先のレイヤーに配置されます。 この挙動はまだ直感的に理解しやすいですね。 レイヤーの異なる図形を接続した時 線や矢印などのコネクタは、異なるレイヤー配置の図形に接続することができます。 接続先の図形が非表示になるとそれに連動してコネクタも非表示になります。 コネクタが見当たらないと思っ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 draw.io(diagrams.net)を利用して、画面仕様を作成して、エンジニアたちと共有するメリットについてまとめてみました。 Diagram Software and Flowchart Maker draw.ioって何?って方は下記の記事など参考にしてください。 Draw.ioの導入方法と日本語化 背景 顧客から提供される画面案、デザイナーから提供されるモックアップ(もしくはそれらを実現したHTML/CSS等)は、「デザイン・見た目・それらに対する想い」を理解するのには、大変有益なものですが、実際に実装しようとする場合に
こんにちは。たかやまです。 私は基本ダークモードを使っています。GitHubのテーマももちろんダークモードです。 こんな私の環境でDraw.ioで作図した画像をGitHubで見ようとすると... こんな感じでなんだかわからない感じになっていました。 小ネタですが、ダークテーマな環境で見やすくするために画像の背景を変える手順を今回ブログにしようと思います。(透過画像だとダークテーマには見ずらいことを伝えるのが真意) やりたいこと こうじゃなくて ↓ こう やること 至極単純で、右ペインのダイアグラムで背景を有効化してカラーコードFFFFFFを設定します。 この状態でエクスポート*1してもらえれば、いい感じにオブジェクトの範囲で背景色がついた状態になります。 1 vscodeであれば拡張子drawio.svgを使うことでエクスポート不要で便利 Tips 背景色を設定した場合、オブジェクトのある
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く