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 - drawdb-io/drawdb: Free, simple, and intuitive online database design tool and SQL generator.
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
GitLab.com
案件でAWSの構成図を作成する機会があったので備忘兼ねて投稿します。 ※約5分で読めます 1. グループの内側から作成していく AWSの基本的なグループ構成はこんな感じ 添付の場合、個人的には Public subnet or Private subnet > Availability Aone > VPC > Region > AWS Cloudの順番で作成することをオススメします。理由は内側のグループが肥大すると外側のグループの手直しが発生するためです。 今回作成した時に外側から作成してしまい、めっちゃ時間がかかってしまいました... 2. グループの左上を掴む 日本語が下手ですみません。 なぜ左上を掴まないといけないか？試しにPublic subnetをクリックしてドラッグをすると、添付の様になりました。 クリックをするとグループの外から選択されてしまうため、選択したグループ内に存在
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
Recursion Viewer
Website for visualizing recursive functions. Helps to debug and understand how your recursive algorithm works
GitHub - 3rd/tsdiagram: Create diagrams and plan your code with TypeScript.
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
Create diagrams and plan your code with TypeScript.
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 - ByteByteGoHq/system-design-101: Explain complex systems using visuals and simple terms. Help you prepare for system design interviews.
Architecture styles define how different components of an application programming interface (API) interact with one another. As a result, they ensure efficiency, reliability, and ease of integration with other systems by providing a standard approach to designing and building APIs. Here are the most used styles: SOAP: Mature, comprehensive, XML-based Best for enterprise applications RESTful: Popul
こんにちは。いせりゅーです😃 「視覚的に理解しやすく、効率的にコードの構造や流れを把握する」ということは開発においてとても助けになると思っています。特に複雑なアーキテクチャや多数のコンポーネントを持つフレームワーク、例えばFlutterのようなものを使用する場合、依存関係の把握は必須となりますが、把握をするのが難しかったり、時間がかかったりすると思います。 実際に、社会人になり研修課題をしている中でriverpod_graphを勉強し、それがとても便利だったので、アウトプットのために書いていこうと思いました。 riverpod_graphとは、 ↑こちらから引用しています。 riverpodの作成者が作成したツール providerとwidget間の相互作用のグラフを生成し、可視化できるもの 手順を踏むとと自動生成ファイルが生成される（今回は、graph.mdに生成する） グラフは、d2
![[Flutter]Flutterでの依存関係図の自動生成が便利だった件について - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/47334f2297f1eb470b09bb2985654a212b23f799/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCRmx1dHRlciU1REZsdXR0ZXIlRTMlODElQTclRTMlODElQUUlRTQlQkUlOUQlRTUlQUQlOTglRTklOTYlQTIlRTQlQkYlODIlRTUlOUIlQjMlRTMlODElQUUlRTglODclQUElRTUlOEIlOTUlRTclOTQlOUYlRTYlODglOTAlRTMlODElOEMlRTQlQkUlQkYlRTUlODglQTklRTMlODElQTAlRTMlODElQTMlRTMlODElOUYlRTQlQkIlQjYlRTMlODElQUIlRTMlODElQTQlRTMlODElODQlRTMlODElQTYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWU1MDU1ZDhhMTk3NzE2MjZhODA5MDE5MzBmZmRiNzVi%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwaXNla2lyeXUlMjBpbiUyMCVFNiVBMCVBQSVFNSVCQyU4RiVFNCVCQyU5QSVFNyVBNCVCRSVFMyU4MiU4NiVFMyU4MiU4MSVFMyU4MSVCRiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTMyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OWZlMjgzMjViYjZiMDc2ZGM5NmE3NmU0MzY4YzE1Y2Q%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dc3d67a11f04e11fe900b30285e130df2)
ChatGPTを使ってDDLからER図をすばやく作成する - Taste of Tech Topics
最近、酢を飲むと健康に良いという話を聞き、頑張って毎日飲んでいるkonnoです。 何となくですが、朝の目覚めは良くなっている気がしますよ！ 今回はデータベース設計に欠かせないER図を、ChatGPTを使ってDDL（Data Definition Language：SQLのデータ定義言語）から簡単に作成できるのか試してみたいと思います。 サンプルとなるDDLを用意 DDLのサンプルとして、以下のMySQL公式サイトで公開されている従業員データベースを利用します。 dev.mysql.com 従業員データベースに必要なファイル類一式は、上記サイトで紹介されている以下のGithubリポジトリから、 "test_db-master.zip"としてダウンロードできます。 github.com ダウンロードしたtest_db-master.zipには、従業員データベースを設定するために必要なDDLとし
Typograms / Overview
https://github.com/google/typograms/ Overview Typograms (typographic diagrams) is a lightweight image format (text/typogram) useful for defining simple diagrams in technical documentation. Like markdown, typograms is heavily inspired by pre-existing conventions found in ASCII diagrams. A small set of primitives and rules to connect them is defined, which you can use to build larger diagrams. Typog
前のブログでも紹介したのだけど、ChatGPTプラグインのローリングアウトが始まって使えるようになっていて、結局みんな使うのはこの3つくらいかなーとなったので、まとめておきます。 前のブログはこれ。 Bardも世の中のサービスぜんぶGoogle製と思ってるらしい - きしだのHatena 同時に使えるのは3つまでのようだけど、他のプラグインはアメリカの不動産情報など日本からは使いづらかったり、作ってみたレベルだったりなので、結局この３つに落ち着くかなーという気がします。 WebPilot これは手放せなくなります。Web記事を読み込んでくれるプラグイン。 ChatGPTには「この記事を要約して」しか入力しなくなりそう。 このエントリを要約してもらっています。 大規模言語モデルの「脳波」が反応してる部分を壊すとどうなるか試した - きしだのHatena ※ 追記 15:21 ぼくのところには
Home | D2 Documentation
D2: Declarative DiagrammingA modern language that turns text to diagrams Explore docs Create beautiful diagrams in minutes. Simple syntax. Endlessly customizable. D2 is the fastest and easiest way to get a mental model from your head onto the screen, then make edits with your team. NETWORKUSERAPI SERVERLOGSCELL TOWERONLINE PORTALDATA PROCESSORSATELLITESTRANSMITTERUISTORAGE SENDSENDSENDPHONE LOGSMA
Bank failures
Visualization toolmaker. Co-founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
こんにちは、CX事業本部 Delivery部の若槻です。 今回は、GitHubでMermaid構文の表示機能が強化されていたので共有します。 Mermaidとは Mermaidとは、Markdown構文の拡張ツールで、様々なタイプの図（Diagram）をコードやテキストで記述し、視覚的に表示することができます。 Mermaid構文を利用することにより、次のような図をMarkdownで記述することができます。 Flowchart Sequence Diagram Gantt Chart Class Diagram State Diagram Pie Chart Git Graph 公式サイトより引用 GitHubでのMermaid構文の表示機能が強化されていた GitHubではMermaid構文をサポートしており、MarkdownファイルにMermaid構文を記述することで、図を表示すること
Mermaid flow
Mermaid Flow is an online Mermaid JS editor that takes this a step further and simplifies the creation and maintenance of your Mermaid Diagrams. Mermaid Flow generates Mermaid JS code which can be rendered directly in GitHub README's and also stored and version controlled in code. This app makes it easy to create Mermaid JS diagrams with its visual and interactive editor, so you get the stability
大事だけど AWS 構成図では省略してしまうことが多いサービスについて - サーバーワークスエンジニアブログ
コーヒーが好きな木谷映見です。 今回は小ネタです。AWS 構成図を書く際、省略してしまうことが多いサービスについて思いを馳せました。 よくある？構成図 リージョン アベイラビリティゾーン ルートテーブル AWS IAM インスタンスプロファイル Amazon EBS Elastic IP Elastic network interface（ENI） セキュリティグループ セッションマネージャーする時のエンドポイント 最終構成図 終わりに よくある？構成図 よくあると思われる構成図を描いてみました。 AWS になじみがある方から見ると、 「ふむ、パブリックサブネットとプライベートサブネットに 1 台ずつ EC2 インスタンスがあって、プライベートサブネットのインスタンスにはセッションマネージャーでログインするのかな？S3 バケットもあるな」 くらいの想像ができるかもしれません。 リージョン
プロダクトマネージャーに求められる本質、事業成長に貢献するための具体的な心得についてディスカッションをするイベントが、株式会社フライルの主催で開催されました。今回のゲストは、SaaSやアプリ、Web3など幅広い領域で、長年プロダクトマネジメントに携わり、プロダクト開発コミュニティ「PM Club」の運営をしている佐々木真氏。プロダクトマネージャーに必要なスキルや考え方を語りました。全5回。2回目は、佐々木氏がPMスキルの言語化に挑戦している理由について。前回はこちら。 「課題を特定する」ためにPMがやるべきこととは？ 財部優一氏（以下、財部）：「課題を特定する」というのは、具体的にプロダクトマネージャーはどんなことをするべきなんでしょうか？ 佐々木真氏（以下、佐々木）：例えば、「プロダクトを作る」と一口に言っても考えることがけっこういっぱいあるんですよね。まずは、ユーザーを決めなければいけ
この記事は、各種チャートのカタログサイトThe Data Visualisation Catalogueのブログ記事の日本語訳です。翻訳にあたっては、訳注やリンクなどを補いました。原著者の許諾を得て公開しています。転載はご遠慮ください。 2023-02-01更新 本翻訳の訳注での指摘を受けて、原記事を修正していただきました。そのため、一部訳注を削除しました。 Original post: Japanese Contributions to Data Visualisation by Severino Ribecca, The Data Visualisation Catalogue Blog Published: December 29, 2021 Translation: SUGIMOTO Tatsuo はじめに 20世紀の日本のビジュアライゼーション ローソク足 いかり足 カギ足 練行
MermaidDiagramming and charting tool JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
FigmaとNotionでUML・経理処理・デザインまでAll in oneな仕様書を書いて、更新・共有を楽にしてる話 - Qiita
前提としての情報 単に「Figmaで要件定義のためのUMLも、外部設計のためのデザインも、内部設計のためのERDも全部つくるよ〜〜」という話をすると、ERD書くならデザインツールなんて使わないで、DBMSから自動生成できるツールとか使った方がいいじゃん、みたいな疑問が出るのは重々承知なので、そもそもこの形式に落ち着いた前提事項を書いておきたいと思います。 ご興味がなければ読み飛ばしてください。 筆者の仕事範囲 さて、冒頭で「事業会社でデザイナーとPMの狭間みたいな仕事をしてます」と書きました。キャリアの背景的には受託のPMっぽい仕事（厳密には違うんですが、本旨ではないので割愛します）→事業会社のインハウスデザイナー→現職という感じで、外渉から手を動かす所まで、必要ならなんでもします。 ざっくりいうと、機能の起案をして、経理などの関連部署に相談して、WBS引いて、UML書いて、画面遷移図書い
Text to diagram
Basic: An example of the most basic diagramming functions: create a box, give it a label, connect it to another box, label that connection. It also demonstrates shorthand ID substitution, if it exists in the syntax.
GitHub - terrastruct/d2: D2 is a modern diagram scripting language that turns text to diagrams.
vars: { d2-config: { layout-engine: elk # Terminal theme code theme-id: 300 } } network: { cell tower: { satellites: { shape: stored_data style.multiple: true } transmitter satellites -> transmitter: send satellites -> transmitter: send satellites -> transmitter: send } online portal: { ui: {shape: hexagon} } data processor: { storage: { shape: cylinder style.multiple: true } } cell tower.transmit
D2 Tour | D2 Documentation
D2 is a diagram scripting language that turns text to diagrams. It stands for Declarative Diagramming. Declarative, as in, you describe what you want diagrammed, it generates the image. For example, download the CLI, create a file named input.d2, copy paste the following, run this command, and you get the image below. NETWORKUSERAPI SERVERLOGSCELL TOWERONLINE PORTALDATA PROCESSORSATELLITESTRANSMIT
Zenn や GitHub の Markdown から利用できる Mermaid には「Git ブランチを表現する」機能があります。 その機能を利用してみたところよい感じだったので、記述方法やカスタマイズについてなどを記事にしてみます。 Git ブランチを表現するとは？ ドキュメントでブランチの説明などを読んでいると下記のような図(グラフ)を見かけるかと思います。 図 1-1 AA によるブランチのグラフ A---B---C---D develop \ E---F---G topicA \ H---I---J topicB Mermaid の Gitgraph Diagrams を利用することにより、このような感じで表示できるようになります。 図 1-2 Mermaid によるブランチのグラフ 基本的な使い方 Mermaid 用コードブロックの先頭で gitGraph を記述し、Git の
GitHub - AlexeyBoiko/DgrmJS: Dgrm.net - flowchart editor. Works on desktop, phone and tablet. Has no dependency. Pure JavaScript.
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
AWSのアーキテクチャ図を描くときに意識していること
最初に 公式のガイドライン AWSが配布しているツールキットの中に基本的なガイドラインが記載されています。 描き方に正解はない こちらの記事のあるようにアーキテクチャ図に正解はなく、伝えたいことが適切に伝わるということが大切だと思います。 伝えたい内容や伝える相手によって重点や粒度を変えることを心がけています。 描画ツール diagrams.net（Draw.io）を使ってます。 意識していること アイコンは最新バージョンを使用する AWSのアイコンは定期にアップデートされるので最新のアイコンを使うようにします。 ちなみにdiagrams.netでEC2と調べると古いアイコンが先頭に出てきたので意識していないとこちらを使いがちかもです。 アイコンのバージョンを混ぜない アイコンは最新バージョンを使用すると同じような内容ですが、複数バージョンのアイコンが混在しないようにします。以下の図ではE
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. 始
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
Diagram as Code
Diagram as Code6 different ways to turn code into beautiful architecture diagrams
こんにちは、Wantedlyでデータサイエンティストをしている樋口です! 先日会社で買ってもらったデータビジュアライゼーションの基礎を読みました。データ可視化について網羅的にわかりやすく書かれており参考になったため、記事にまとめてみました。書籍の英語版は無料で公開されているため、よければこちらも参考にしてみてください。 データビジュアライゼーションの知識を学ぶことで、科学的に誤った表現をせずに、芸術的に美しい表現ができ、明確で明瞭かつ魅力的にデータから得られる示唆を伝えることができる様になります。📊 本記事では、特定のライブラリや描画手段によらないデータ可視化の基礎について紹介します。 分量が多くなってしまったので、本記事ではデータビジュアライゼーションの”グラフ"にのみ着目しています。グラフ以外の構成要素(色、タイトル、テキスト、etc.)については別途記事にしたいと思います。 本記事
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
ストラトキャスタータイプ配線図一般的なストラトタイプエレキギターの配線です。レバースイッチでリアのピックアップ単体をセレクトしている場合はトーンを効かせることは出来ません。 レバースイッチのベースプレートが金属の場合はアース線(緑色の点線)を繋ぐことでより確実なノイズ対策となります。レバースイッチ本体が樹脂の場合はアースに繋ぐ必要はありません。
わかりにくいシステム構成図とは こんなシステム構成図を書いてないでしょうか？ このシステム構成図のわかりにくい点が３つあります。それは 製品名は書いてあるが「役割」が書いていない データと処理が区別できない データの流れと制御の流れが区別できない の３つです。 わかりやすいシステム構成図 これら３つのわかりにくい点を改善したわかりやすいシステム構成図が↓です ポイントを解説していきます ポイント1. 製品名称ではなく「役割」を書く システム構成図には製品名称ではなくシステムコンポーネントの「役割」を書きます。 役割とは、例えば〇〇データや〇〇処理といったことであり、それを読むだけでシステムの動きを理解できる文字列です。役割をかかずに製品名称のみを書いてしまうと、その製品を知らない人が見たときに理解できません。例えば「Cloud Pub/Sub」という製品はGCPというパブリッククラウドの分
Svelvet
Build interactive, node-based UIs and diagrams in Svelte Svelvet is a lightweight component library for building dynamic, customizable node graphs Beautiful and Customizable Svelvet allows you to easily create intuitive user interfaces and diagrams with pre-built components with node-to-node data flow, seamless zooming and panning, customizable edges and nodes and more! Learn More Get Started Easi
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
UMLとかAWS構成図とかを描くツール
UMLとか構成図とかの図を描くの何のツールを使えばいいか迷いませんか？私は迷います。 ですので、最近使っているツールを紹介します。 世の中にツールがイロイロあるのは理解した上で、大量に紹介するとやっぱり迷うので、似たようなツールや個人的に使わないツールはバッサリ省いています。 パワポで描く まずはPowerPointです。 エンジニアや技術系の方は「パワポで図を描くのはちょっと、、、」と思われるかも知れませんが、状況によってありだと思っています。 パワポのメリット パワポは、ビジネスユーザーならほぼ誰でも使える システムを作る時に、お客さん側も含めた関わるメンバー全員がITに詳しいとは限りません。しかしそういう人にもシステムに対する理解は最低限していただく必要があります。システム構成図とか特に興味がない人に説明するときに「新しいツールをいれてください」というのはハードルが高いです。 パワポ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Screwtape / sqlite-schema-diagram · GitLab
draw.ioを使ってAWSの構成図を作成するコツ - Qiita
TSDiagram - Diagrams as code with TypeScript
GitHub - tldraw/make-real: Draw a ui and make it real
[Flutter]Flutterでの依存関係図の自動生成が便利だった件について - Qiita
iNet
Sequence diagrams, the only good thing UML brought to software development
エンジニアのためのChatGPTプラグイン3選+1 - きしだのHatena
GitHubでMermaid構文の表示機能が強化されていました | DevelopersIO
プロダクトマネージャーに「事業開発やってほしい」は期待過多 PM採用におけるミスマッチ解消を狙う、佐々木真氏の挑戦
日本がデータビジュアライゼーションにもたらしたもの – lab.sugimototatsuo.com
Mermaid | Diagramming and charting tool
Git ブランチの表現も Mermaid がよい感じに表示してくれました
「データビジュアライゼーションの基礎」のまとめ グラフ編
３シングルピックアップ ギター配線図一覧 | Frontisland CustomGuitarWorks
わかりやすいシステム構成図の書き方 - Qiita