全ビジネスマンが使えるClaude3.7 sonnet と draw.ioで始める図の作成。｜遠藤巧巳 - JapanMarketing合同会社 AIネイティブな会社の作り方
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だと人の修正ができないため、ほんの少しの違和感でも
わかりにくいシステム構成図とは こんなシステム構成図を書いてないでしょうか？ このシステム構成図のわかりにくい点が３つあります。それは 製品名は書いてあるが「役割」が書いていない データと処理が区別できない データの流れと制御の流れが区別できない の３つです。 わかりやすいシステム構成図 これら３つのわかりにくい点を改善したわかりやすいシステム構成図が↓です ポイントを解説していきます ポイント1. 製品名称ではなく「役割」を書く システム構成図には製品名称ではなくシステムコンポーネントの「役割」を書きます。 役割とは、例えば〇〇データや〇〇処理といったことであり、それを読むだけでシステムの動きを理解できる文字列です。役割をかかずに製品名称のみを書いてしまうと、その製品を知らない人が見たときに理解できません。例えば「Cloud Pub/Sub」という製品はGCPというパブリッククラウドの分
システム構成図、ER図、フローチャートなどを描くときに無料で使える作図ツールやドローイングツールまとめ。2024
システム構成図、ER図、フローチャートなどを描くときに無料で使える作図ツールやドローイングツールまとめ。2024 システムを開発する際には、インフラを構築するためのシステム構成図やアプリケーションの仕様を検討するためのさまざまなUML関連のダイアグラム、フローチャートやデータベース設計におけるER図など、さまざまな作図をする場面があります。 これらの作図作業を支援してくれるツールは多数存在しますが、ここでは無料で使えるツール、あるいは無料プランが利用できる有料サービスなどをまとめました。 draw.io 無料で利用できるドローイングツールの代表的な存在がdraw.ioでしょう。ユーザー登録すら不要ですぐに使い始めることができて、作図したデータはGoogle DriveやOneDrive、Dropbox、GitHubやGitLab、ローカルデイバイスなどに保存できます。 GitHubにサーバ
前のブログでも紹介したのだけど、ChatGPTプラグインのローリングアウトが始まって使えるようになっていて、結局みんな使うのはこの3つくらいかなーとなったので、まとめておきます。 前のブログはこれ。 Bardも世の中のサービスぜんぶGoogle製と思ってるらしい - きしだのHatena 同時に使えるのは3つまでのようだけど、他のプラグインはアメリカの不動産情報など日本からは使いづらかったり、作ってみたレベルだったりなので、結局この３つに落ち着くかなーという気がします。 WebPilot これは手放せなくなります。Web記事を読み込んでくれるプラグイン。 ChatGPTには「この記事を要約して」しか入力しなくなりそう。 このエントリを要約してもらっています。 大規模言語モデルの「脳波」が反応してる部分を壊すとどうなるか試した - きしだのHatena ※ 追記 15:21 ぼくのところには
ネットワークの構成を視覚的に把握しやすいアイソメトリック図で表現でき、作成した図面を共有して相手に見せることができるオンラインサービスが「Isoflow」です。 Isoflow https://isoflow.io/ まずはお試しですぐに図面の作成画面に行くことができます。「CREATE A DIAGRAM」をクリック。 表示されたキャンバス上の好きな位置のマス目をクリックするとノード部品が設置されます。 ノードが設置されると左側にダイアログが出現するので、Label入力欄で名前を付けます。ノードのアイコンを変更するため「Node icon」をクリック。 アイコン一覧が表示されるので目的のアイコンの絵をクリックして変更します。 さらにノードを増やした後、ノードアイコンをクリック。 ノードのサブメニューが表示されるので「Connect」をクリック。 ノードを接続するためのポインタをマウスで動
大事だけど AWS 構成図では省略してしまうことが多いサービスについて - サーバーワークスエンジニアブログ
コーヒーが好きな木谷映見です。 今回は小ネタです。AWS 構成図を書く際、省略してしまうことが多いサービスについて思いを馳せました。 よくある？構成図 リージョン アベイラビリティゾーン ルートテーブル AWS IAM インスタンスプロファイル Amazon EBS Elastic IP Elastic network interface（ENI） セキュリティグループ セッションマネージャーする時のエンドポイント 最終構成図 終わりに よくある？構成図 よくあると思われる構成図を描いてみました。 AWS になじみがある方から見ると、 「ふむ、パブリックサブネットとプライベートサブネットに 1 台ずつ EC2 インスタンスがあって、プライベートサブネットのインスタンスにはセッションマネージャーでログインするのかな？S3 バケットもあるな」 くらいの想像ができるかもしれません。 リージョン
Mermaid Flow is a Visual Mermaid live editor that aims to simplify creating Mermaid JS Diagrams online. Currently Mermaid Flow supports Flowchart diagrams, giving you the ability to Drag and Drop nodes, edges and labels to create your Flowchart diagrams visually. This mermaid live editor is useful for creating and maintaining complex diagrams such as Software Architecture diagrams. Once drawn, sim
Beautiful Mermaid
こんにちは、Wantedlyでデータサイエンティストをしている樋口です! 先日会社で買ってもらったデータビジュアライゼーションの基礎を読みました。データ可視化について網羅的にわかりやすく書かれており参考になったため、記事にまとめてみました。書籍の英語版は無料で公開されているため、よければこちらも参考にしてみてください。 データビジュアライゼーションの知識を学ぶことで、科学的に誤った表現をせずに、芸術的に美しい表現ができ、明確で明瞭かつ魅力的にデータから得られる示唆を伝えることができる様になります。📊 本記事では、特定のライブラリや描画手段によらないデータ可視化の基礎について紹介します。 分量が多くなってしまったので、本記事ではデータビジュアライゼーションの”グラフ"にのみ着目しています。グラフ以外の構成要素(色、タイトル、テキスト、etc.)については別途記事にしたいと思います。 本記事
東京の「カフェ路線図」が見やすくて便利！スタバ、ドトール、コメダなど…多い駅と少ない駅が一目瞭然「やっぱ中央線か」「スタバはすごいな」
にゃんこそば🌤データ可視化 @ShinagawaJP オープンデータを使って都市・地域を可視化したり、防災・天気・住まいなどの関心分野を呟いています。 働き過ぎて体を壊したのでスローダウン中。2026年には色々描きます！ 💻QGIS/Mapbox/ArcGIS/Tableau/Python/R
UMLとかAWS構成図とかを描くツール
UMLとか構成図とかの図を描くの何のツールを使えばいいか迷いませんか？私は迷います。 ですので、最近使っているツールを紹介します。 世の中にツールがイロイロあるのは理解した上で、大量に紹介するとやっぱり迷うので、似たようなツールや個人的に使わないツールはバッサリ省いています。 パワポで描く まずはPowerPointです。 エンジニアや技術系の方は「パワポで図を描くのはちょっと、、、」と思われるかも知れませんが、状況によってありだと思っています。 パワポのメリット パワポは、ビジネスユーザーならほぼ誰でも使える システムを作る時に、お客さん側も含めた関わるメンバー全員がITに詳しいとは限りません。しかしそういう人にもシステムに対する理解は最低限していただく必要があります。システム構成図とか特に興味がない人に説明するときに「新しいツールをいれてください」というのはハードルが高いです。 パワポ
Diagram as Code
Diagram as Code6 different ways to turn code into beautiful architecture diagrams
【新機能】Google Cloud 純正の構成図ツール Architecture Diagramming Tool が発表されました | DevelopersIO
【新機能】Google Cloud 純正の構成図ツール Architecture Diagramming Tool が発表されました Google Cloud のアーキテクチャ図を書く純正のツール Architecture Diagramming Tool が発表されました。Google Cloud の構成図ツールの決定版になると思います。 ウィスキー、シガー、パイプをこよなく愛する大栗です。 先程 Google Cloud 純正のアーキテクチャ図作成ツールである Google Cloud Architecture Diagramming Tool が発表されました。 Introducing a Google Cloud architecture diagramming tool Google Cloud Architecture Diagramming Tool 今まではGoogle S
グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO
データアナリティクス事業本部 サービスソリューション部 サービス開発チームのしんやです。 Notionの直近リリースノートに「Mermaidっていうマークダウン構文がNotionで使えるようになったよ！」という情報が載っていたので、試してみた内容を軽くではありますが紹介したいと思います。 目次 Mermaidとは 実践 #1. フローチャート #2. シーケンス図 #3. クラス図 #4. 状態遷移図 #5. ER図 #6. ジャーニーマップ #7. ガントチャート #8. パイチャート #9. 要件図 まとめ Mermaidとは Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。 コードから良い感じのグラフを生成できるイメージについては下記動画を参照頂くと良さそうです。 実践 では早速実践してみたいと思いま
こんにちは。たかやまです。 いままでいくつものIaCツールをベースにAWS構成図作成する作図ツールがでているかと思います。 ただ、これらは独自ツールでユーザー側で編集できないものだったり、作成された構成図のエクスポート先がPDFやPNGだったりと、後から修正や更新がしにくいという課題があります。 私は普段draw.ioやCacooを使ってAWS構成図を作成しています。 日々新しい生成AIモデルが登場していますが、draw.ioはXML形式で構成図が定義されるため、生成AIでも扱いやすいのではないかと考えました。 実際に試してみたところ、想定以上に高品質なAWS構成図を作成してくれたので今回はそちらをご紹介します。 さきにまとめ CDKやCloudFormation、Terraformのコードから直接構成図を生成できる モデルはClaude 3.5 Sonnet以上がおすすめ Anthrop
図で理解する Flexbox
Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 ※ CSS Grid についても整理してみました Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央寄せ・上寄せなど細かな位置も調整できます。 コンテナ・アイテム Flexboxを使う上で必要となる要素が「Flexコンテナ」と「Flexアイテム」です。 Flexコンテナの中にFlexアイテムを複数並べてレイアウトします。 <div class="container"> <div class="item">１</div> <div class="item">２</div> <div class="item"
draw.ioでレイヤーを使ったらAWS構成図が捗ったお話AWSを使っている方なら、dwar.ioを使って構成図を書く機会が結構あると思います。構成図を書く時のイラッとをなくすレイヤーという機能を知ったのでご紹介したいと思います。え？今更知ったの？そんなの知ってるよ。と言われちゃうかもですが、ご紹介させてくださいませ。 その前に、構成図書く時にどう書いたら良いんだろう、、、となる時ありますよね。参考にしている良い記事あるのでご紹介させてください。今まで結構雰囲気で書いていたのですが、この記事を見てから綺麗にかけるようになりました。 AWSのアーキテクチャ図を描くときに意識していること それではレイヤーのお話に行きたいと思います。ECSコンテナを編集したい場合、まずレイヤーを使っていないときは、こうなりますよね。 邪魔なのをどかしてどかして、やっと編集できます。次回すぐ編集できるように最前面
ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など） - Qiita
はじめに データベース設計のER図について、VSCodeなどで作成する以下３つの方法を比較した記事です。 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での使い方
Python コードでアーキテクチャ図を生成できる Diagrams がめっちゃ便利！ - kakakakakku blog
「Diagrams」を使うと Python コードでアーキテクチャ図を生成できる．サポートされているアイコンセットがとても多く AWS や Google Cloud や Microsoft Azure もあれば，Kubernetes やプログラミング言語なども使える．試してみたけどめちゃくちゃ便利！まさに Diagram as Code だ✌️ diagrams.mingrammer.com セットアップ 「Diagrams」は Graphviz に依存しているため，macOS だと pip と brew ですぐにセットアップできる． $ pip install diagrams $ brew install graphviz 試してみた さっそく Examples を参考にアーキテクチャ図を作ってみた！ サンプル : AWS from diagrams import Cluster, D
[2025-12-16 追記] 手っ取り早く手元で使いたい方は「6.1. drawio のインストール」を済ませてこちらの記事をチェック！ 1. はじめに 株式会社GENDA データエンジニア / MLOps エンジニアの uma-chan です。 この記事は GENDA Advent Calendar 2025 シリーズ4 Day 12 の記事です。 1.1. この記事について Claude Code に draw.io 形式の図を描かせようとすると、意外とハマりポイントが多いです。 フォントが反映されない 矢印がラベルと被る テキストが意図しない改行をする 本記事では、私が実際にプレゼン資料の図を Claude Code に描かせる中で学んだコツをまとめます。 1.2. なぜ Claude Code に draw.io を描かせるのか draw.io の GUI で図を作成するのは時間
はじめに テキストからダイアグラムを生成できるMermaidを使ってAWS構成図を作成する際のテクニックを、いくつかピックアップしてご紹介します。 Mermaidを使えば、構成図内のテキスト検索はもちろん、アイコンを使って見やすく表現したり、アイコンをクリックしてマネジメントコンソールなどに遷移させたりすることもできるため、実用性の高い構成図が作成できます。 本記事が、Mermaidを活用したAWS構成図の作成に少しでもお役に立てば幸いです。 AWS構成図の使用例 Mermaidで作成したAWS構成図の使用例を紹介します。 例えばQiitaでも以下のように表示できます。(リンクはサンプルです) mermaid記法 --- title: 000000000000-xxxxxxxx環境 config: theme: neutral flowchart: nodeSpacing: 10 rank
DB設計書の管理が楽になるDBML入門 – DBMLの書き方,dbdiagram.io, dbdocs の紹介 – | SIOS Tech Lab
Table users { id integer [pk] first_name varchar last_name varchar email varchar [not null] password varchar [note: 'Hashed password'] created_at datetime [not null, default: `now()`] updated_at datetime Indexes { email [unique, name: "ui_users_email"] } Note: 'table: users' } 上記のテーブル定義を dbdiagram.io の左側のコード記載部分に張り付けると右側にプレビューが表示されます。 以下は dbdiagram.io でのプレビューをした時の表示です。(Noteの箇所は説明のため加工しています) (1) Ta
FigmaとNotionでUML・経理処理・デザインまでAll in oneな仕様書を書いて、更新・共有を楽にしてる話 - Qiita
本記事は Figma Advent Calendar 2022 16日目の投稿です。 仕様書を作るとき、あの情報はこのツールで書いたほうが楽、みたいな感じで、あっちこっちに情報が散逸することがありますよね。 かくいう私も、事業会社でデザイナーとPMの狭間みたいな仕事をしていまして、UMLだのデザインだの、複数のツールを跨いで作業をすることが多かったのですが、最近は安定してFigma＋Notionで作業をしています。 これはデザイナーなのでFigmaの使い方に慣れている、ということもあるんですが、Figmaの自由度の高さや、Notionの情報統合性の高さ（この辺は後述します）が筆者の仕事範囲と大変に相性が良く、今の所ここがベストという形に落ち着いているので、軽く紹介してみようと筆を取りました。ご興味があれば読んでください。 TL;DR（この記事のあらすじ） エンジニア・非エンジニア・社内外い
How to be a Developer AWS のアーキテクチャ図を描きたい ! でもどうすれば良いの ? 2022-04-04 | Author : 杉本 圭太 こんにちは ! テクニカルトレーナーの杉本圭太です ! 最近読んで面白かった漫画は「海が走るエンドロール」です。 私は業務でお客様に AWS の様々なトレーニングを提供しているのですが、コースによっては AWS を利用したシステムのアーキテクチャ図を受講者自身に描いていただく演習を取り入れており、よくこんな相談を受けます。 「どうやって AWS のアーキテクチャ図を描くのが正解なんですか ?」 AWS のアーキテクチャ図を描く状況は以下のように様々な場面であり、同じような疑問や悩みをお持ちの方も多いのではないでしょうか ? 詳細設計で構成図が必要 チームで wiki などに図を貼り付けて残したい 構成検討フェーズなどで図を見
JSON Canvas
An open file format for infinite canvas data. Infinite canvas tools are a way to view and organize information spatially, like a digital whiteboard. Infinite canvases encourage freedom and exploration, and have become a popular interface pattern across many apps. The JSON Canvas format was created to provide longevity, readability, interoperability, and extensibility to data created with infinite
AWSのアーキテクチャ図を描くときに意識していること
最初に 公式のガイドライン AWSが配布しているツールキットの中に基本的なガイドラインが記載されています。 描き方に正解はない こちらの記事のあるようにアーキテクチャ図に正解はなく、伝えたいことが適切に伝わるということが大切だと思います。 伝えたい内容や伝える相手によって重点や粒度を変えることを心がけています。 描画ツール diagrams.net（Draw.io）を使ってます。 意識していること アイコンは最新バージョンを使用する AWSのアイコンは定期にアップデートされるので最新のアイコンを使うようにします。 ちなみにdiagrams.netでEC2と調べると古いアイコンが先頭に出てきたので意識していないとこちらを使いがちかもです。 アイコンのバージョンを混ぜない アイコンは最新バージョンを使用すると同じような内容ですが、複数バージョンのアイコンが混在しないようにします。以下の図ではE
JSON Crack | Online JSON Viewer - Transform your data into interactive graphs
Make working with JSON easyJSON Crack eliminates the chaos of raw, messy data, making the complex appear simple and easy to understand. Upload your dataUpload your JSON file, URL, or type your data directly into our easy-to-use text editor.
ER図の自動生成について、dbdiagram.io, DBeaver, A5M2 を比較してみる。 - Qiita
はじめに データベース設計のER図について、自動で生成する以下３つのツールを比較した記事です。 dbdiagram.io DBeaver A5:SQL Mk-2（A5M2） 先日、こちらの記事をQiitaに投稿したところ、多くの方に記事を見ていただき、コメントも多数いただきました。 ER図に関するお勧めのツールをコメントいただく方が多くいらっしゃいました。 今回はその中から、無料でも利用できる3つのツールの「ER図の自動生成」の機能を試します。 比較の結論としては、〇〇が一番良いという感想ではなく、どのツールも多機能で、できることは違うので、今後使うときは用途や業務の環境によって使い分けていけたらと思っています。 目次 それぞれのツールについて、下記の内容を書いていきます。 1. dbdiagram.io 1-1. 始める 1-2. 使う 1-3. 感想 2. DBeaver 2-1. 始
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の順番で作成することをオススメします。理由は内側のグループが肥大すると外側のグループの手直しが発生するためです。 今回作成した時に外側から作成してしまい、めっちゃ時間がかかってしまいました..
GitHub - ByteByteGoHq/system-design-101: Explain complex systems using visuals and simple terms. Help you prepare for system design interviews.
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
はじめに GitHub で Mermaid がサポートされました。 Mermaid は図やグラフを描画するの独自の記法を持ちます。 その記法を Markdown のコードブロック中に記述するだけで図を描画できるのが便利です。 ...便利なのですが、記法が独特なことや機能が豊富なことから、とっつきにくいところもあります。 弊社[1]では みんチャレ 開発の情報共有ツールとして esa.io を活用しており、 esa も Mermaid をサポートしており以前から活用していました。 この記事では、私がこれまでに活用してきた中から特に便利だと感じた機能を紹介します。 ちなみに Zenn も Mermaid をサポートしているため図を描画できます。 Gantt ガントチャートです。 私が Mermaid を使いたいと思ったきっかけの機能です。 まずは、一番シンプルな例を書きます。 gantt Co
AWS 構成図をプロンプトひとつで作れる！Claude Code + draw.io MCP サーバーを試してみた | DevelopersIO
AWS 構成図をプロンプトひとつで作れる！Claude Code + draw.io MCP サーバーを試してみた はじめに クラスメソッドオペレーションズの Shimizu です。 ブログ執筆や社内資料のために AWS のインフラ構成図を作成する機会がよくあります。 これまでは手動でコツコツ作っていましたが、draw.io MCP サーバーの登場により、複雑なシステム構成図もプロンプトの指示ひとつで簡単に作成できるようになりました。しかも自由に編集可能です。 今回は Claude Code と draw.io MCP サーバーを組み合わせて、管理している AWS アカウントのインフラ構成を読み取ってそのまま構成図にする、という手順を試してみました！ draw.io とは draw.io はフローチャートやネットワーク図など、さまざまな図を直感的なマウス操作で作成できるwebサービスで、ユ
draw.ioをつかったフレキシブルな設計図作成術 - KAKEHASHI Tech Blog
はじめに こんにちは！ソフトウェアエンジニアの種岡です。 皆さん、システム設計に取り組んでいますか？ 設計は、プロジェクト成功への道筋を描く、航海の羅針盤です。 目的地を見据え、それに向かって進むための確かな指針となります。 設計の質がしっかりしていれば、開発という大海原でも迷わず進むことができます。 設計はプロジェクトの土台を築く、創造的かつ重要なプロセスです。 夢を描き、それを形にする試行錯誤の楽しさ、これこそが設計の魅力だと思います。 この記事は秋の技術特集 2024の11記事目です。 この記事 is 何？ この記事では、設計図を描く際の心構えと、誰でも見やすい設計図を作成するためのテクニックについてお話しします。 なぜ設計図を書くのか？ 図は複雑な情報を視覚的に整理し直感的な理解を推進することができるため チーム内外での共通理解を促進し、コミュニケーションを円滑にするため 予測可能
はじめに プログラマやドキュメント作成者にとって、図は複雑な概念を説明する上で欠かせないツールです。しかし、図の作成は煩雑で時間がかかるものです。Microsoftが開発した「mermAId」というVS Code拡張機能を使うことで、一瞬で図を作ることができるようになります。というわけで、実務で使ってみたので、その使い方をご紹介したいと思います。 Mermaidとは 紛らわしいのですが、Mermaidはテキストベースでフローチャートやシーケンス図などを描けるJavaScriptライブラリです。一方、mermAIdはそのMermaid記法をCopilotを使って自動生成・編集できるVS Code拡張機能です。余談ですが、「mermAId」のうち、なぜAIだけ大文字なんだろうと思ったら、AIと掛けているのですね。 たとえば、下記のテキストをMermaidにして出力すると 以下の通りになります。
Liam ERD
ER Diagrams, Reinvented for Simplicity.Automatically generate and explore your database schema with a powerful interactive viewer
視覚的階層の作り方 情報の重要度を視覚的に表現するテクニック： サイズによる強調：重要な要素ほど大きく 色による区別：カテゴリーごとに色分け（最大5色程度に抑える） 配置による関係性表現：中心・周辺、上下左右の位置関係で重要度を表現 線の太さと種類：実線/破線/点線で関係性の強さや種類を区別 シンプル化のコツ 図解は複雑さを減らすためのものであるため、シンプルさが重要： 抽象化レベルの統一：同じ図の中で詳細度を揃える 情報の取捨選択：本質的な要素だけを残し、ノイズを削除 チャンク化：7±2の法則を意識し、一度に表示する要素数を制限 反復パターンの活用：類似構造は同じ表現方法で統一 認識のギャップを埋める図解テクニック チームメンバー間の知識や理解の差を埋めるための図解テクニック： 前提条件の可視化 仮定リスト：図の隅に、前提としている条件を明示的にリスト化 知識マップ：議論に必要な知識領域
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
本書はドキュメントについてはもちろんのこと、たとえば人に伝える際にどうすればよいかやリモートワークで働く際に何を気をつけたらよいかといった、開発現場で遭遇する「コミュニケーション」つまり情報伝達の方法論をいろいろと教えてくれる一冊です。今回は私が印象に残った内容を思考の整理がてら紹介したいと思います。 なんとなくタイトルが気になって買ったのが最初でしたが、思ったより自分の知らない話題が多くて得るものは多かったです。また、なんとなく意識していたものに対して名前がついていたことを知れたのもまた収穫だったと思いました。 開発者とアーキテクトのためのコミュニケーションガイド ―パターンで学ぶ情報伝達術 作者:Jacqui Readオーム社Amazon どんな本か 開発時に出会う情報伝達術についていろいろと体系的に指南してくれる一冊と思って良いでしょう。 まず最初は視覚的なコミュニケーション、つまり
【2026年最新】100ページ超の要件定義書も楽勝！Antigravity × NotebookLMでドキュメント作成を爆速化 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 数日でこの記事の手法を大幅改良し、NotebookLMでの手動処理が完全に不要になったので別記事にしました。 新しく読む方は新しい記事をおすすめします。 →【全自動に超進化】100ページ超のPDF要件定義書も余裕！Antigravityだけで一気に設計書に落とし込む！ AntigravityとNotebookLMで大規模PDF仕様書から大規模Wordドキュメントを作成するワークフロー 大規模な要件定義書や仕様書（数百ページのPDFなど）をAIに読み込ませ、そこからシステム設計書や提案書などの新規ドキュメントを自動生成させたい。 通常、こ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わかりやすいシステム構成図の書き方 - Qiita
エンジニアのためのChatGPTプラグイン3選+1 - きしだのHatena
立体的な表現で見やすいネットワーク図がブラウザ上で作成できる「Isoflow」
Online Mermaid Visual Editor | Mermaid Flow
「データビジュアライゼーションの基礎」のまとめ グラフ編
生成AIにdraw.ioのAWS構成図を作図させてみた | DevelopersIO
draw.ioでレイヤーを使ったらAWS構成図が捗ったお話
Claude Code に draw.io の図を描かせるコツ
MermaidでAWS構成図を作成するテクニック - Qiita
AWS のアーキテクチャ図を描きたい ! でもどうすれば良いの ?
draw.ioを使ってAWSの構成図を作成するコツ - Qiita
GitHubで使えるようになった Mermaid の便利なところ
Draw.io（diagrams.net）で作成したインフラ構成図をコードで管理する、GitHubで編集差分を確認する | DevelopersIO
GitHub Copilotを持っているならvscode-mermAIdを試そう
エンジニア同士の図解コミュニケーション技術 - Qiita
Include diagrams in your Markdown files with Mermaid
『開発者とアーキテクトのためのコミュニケーションガイド』 - Don't Repeat Yourself
note.com/xero613
digital.asahi.com
story.fany.lol
medical-book.sakura.ne.jp
mitsumarusan.com
www.jimin-saitama.net