わかりにくいシステム構成図とは こんなシステム構成図を書いてないでしょうか？ このシステム構成図のわかりにくい点が３つあります。それは 製品名は書いてあるが「役割」が書いていない データと処理が区別できない データの流れと制御の流れが区別できない の３つです。 わかりやすいシステム構成図 これら３つのわかりにくい点を改善したわかりやすいシステム構成図が↓です ポイントを解説していきます ポイント1. 製品名称ではなく「役割」を書く システム構成図には製品名称ではなくシステムコンポーネントの「役割」を書きます。 役割とは、例えば〇〇データや〇〇処理といったことであり、それを読むだけでシステムの動きを理解できる文字列です。役割をかかずに製品名称のみを書いてしまうと、その製品を知らない人が見たときに理解できません。例えば「Cloud Pub/Sub」という製品はGCPというパブリッククラウドの分
システム構成図、ER図、フローチャートなどを描くときに無料で使える作図ツールやドローイングツールまとめ。2024 システムを開発する際には、インフラを構築するためのシステム構成図やアプリケーションの仕様を検討するためのさまざまなUML関連のダイアグラム、フローチャートやデータベース設計におけるER図など、さまざまな作図をする場面があります。 これらの作図作業を支援してくれるツールは多数存在しますが、ここでは無料で使えるツール、あるいは無料プランが利用できる有料サービスなどをまとめました。 draw.io 無料で利用できるドローイングツールの代表的な存在がdraw.ioでしょう。ユーザー登録すら不要ですぐに使い始めることができて、作図したデータはGoogle DriveやOneDrive、Dropbox、GitHubやGitLab、ローカルデイバイスなどに保存できます。 GitHubにサーバ
自身のプライオリティによりますが、いくつか。 Markdownで幅広く再利用性を利かせたい、長期的に丁寧に版管理したい 自分自身の操作性、描きやすさと、見た目 俄然手軽に、短期的に、Onlineでいつでもどこでも いずれかという視点で考えると良いのかなと思い、並べてみました。 1. 長期的に: Markdownで幅広く再利用性を利かせたい、丁寧に版管理したいなら Markdownで描くことのメリットは再利用性。 将来的に追記・編集、自分以外の誰かが手を入れる可能性が高い。 現在のドキュメントだけでなく多種説明資料、媒体に転用する可能性がある。 ...という点で差分管理をしたいなら、以下。 VSCodeでPlantUML、Mermaid 上記参考で以下。 Alt+D でプレビュー起動。 Ctrl + Shift + P でコマンドパレットを起動し、出力。 png, svg, eps, pdf
こんにちは、臼田です。 みなさん、業務設計してますか？(挨拶 今回はMarkdownでシーケンス図やフローチャートなどの図を記述できるMermaidを使って業務フローを書いてみたら、意外と書けたので自分なりのTipsを紹介したいと思います。 その前に 注意点として、まだMermaidを使い始めたばかりなので、「もっとこうしたらいいぞ」とか「こっちのほうがいいぞ」とかあれば建設的なフィードバックとしてSNSとかでいただけるとありがたいです。 あと業務フローって表現しましたが、人によって思い描く業務フローが違うと思うので、業務フローの定義に関するツッコミはご容赦ください。私が今回Mermaidで書いたのは以下の図です。(内容はブログ用に簡素化しました) この図のコードは以下のとおりです。(後ほど解説します) sequenceDiagram autonumber actor お客様 partic
Gigazineさんでdrawthe.netを取り上げていたので紹介です。使い方はGigazineさんのほうが丁寧なので、気になる方はチェックしてみてください。（2020年12月1日、追記） drawthe.netとは cidrblock/drawthe.netは複雑なネットワーク図も「テキストで書いてブラウザ上でSVGレンダリングできるようにしよう」というコンセプトのもと開発されたツールです。下図のように複雑な構成図も精度高く描くことができます。 拡大してみると情報量が多いこと、またいかに整っているかがわかると思います。 デモサイトも用意されているので、サクッと試したい場合はコチラが便利です。コードはGitHubで公開されています。更新が2017年末で止まってしまっているのが玉に瑕ですが、十分な性能を発揮してくれます。 drawthe.netを使いたい理由 美しい構成図といえばInter
ネットワークの構成を視覚的に把握しやすいアイソメトリック図で表現でき、作成した図面を共有して相手に見せることができるオンラインサービスが「Isoflow」です。 Isoflow https://isoflow.io/ まずはお試しですぐに図面の作成画面に行くことができます。「CREATE A DIAGRAM」をクリック。 表示されたキャンバス上の好きな位置のマス目をクリックするとノード部品が設置されます。 ノードが設置されると左側にダイアログが出現するので、Label入力欄で名前を付けます。ノードのアイコンを変更するため「Node icon」をクリック。 アイコン一覧が表示されるので目的のアイコンの絵をクリックして変更します。 さらにノードを増やした後、ノードアイコンをクリック。 ノードのサブメニューが表示されるので「Connect」をクリック。 ノードを接続するためのポインタをマウスで動
Mermaid Graphical Editor VSCodeの拡張機能です。 Mermaid記法を利用してマークダウン内部で作図しながら、Mermaidそれ自体のエディタを立ち上げることができます。 逆にMermaid Editor側で編集した内容もマークダウンにフィードバックされます。 vs Draw.io Integration 類似ツールとしてDraw.io Integrationがあります。 こちらは.drawio拡張子のファイルをVSCodeで作成すると、draw.ioのエディタが開いて作図ができるツールです。 しかし、draw.ioはあくまで図が書けるところを生業としていて、作成したdraw.ioファイルをマークダウンファイルに埋め込むには画像としてexportが必要です。 できれば自分はマークダウン以外のファイルを作らず、一つのマークダウンファイルだけで完結したいと思ってま
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
クラウドサービスでは大量の機能が多種多様に提供されており、簡単なアプリでも複数のサービスを組み合わせて利用することも珍しくありません。そうしたバックグラウンドのサービスを設計する際に役立つのがサービス間の構造を図に落とし込んだ「アーキテクチャ図」です。これまでもサードパーティーからさまざまなアーキテクチャ図作成ツールが提供されてきましたが、2022年2月17日にGoogleが自社クラウド向けの公式アーキテクチャ図作成ツールをリリースしたので、早速使い勝手を試してみました。 Google Cloud Developer Cheat Sheet https://googlecloudcheatsheet.withgoogle.com/architecture Introducing a Google Cloud architecture diagramming tool | Google Cl
はじめに現在所属しているプロジェクトではWeb APIやバッチ処理の設計の一環としてPlantUMLを利用しています。効率よく品質高くアウトプットを出すためには、プログラミング言語に対してコーディング規約があるように、UMLに対してもチームで設計するにあたり一定のルールを決める必要があります。 そこでプロジェクト内のPlantUMLを使用するうえでのガイドラインやルールをまとめる機会があり、せっかくなのでそれを記事化します。 記事のゴール シーケンス図設計におけるPlantUMLの標準化 必要最低限のルールだけに絞ってチーム設計の生産性と品質を上げる 記事の前提 ルールの想定の利用シーン： チームで大量生産する業務機能の処理フローを表現するために使う場合を想定。 また、この記事に記載されているルールはRDBを中心的に使用したAPI処理やバッチ処理等を念頭に置き決められたものです。 ルールの
UMLとか構成図とかの図を描くの何のツールを使えばいいか迷いませんか？私は迷います。 ですので、最近使っているツールを紹介します。 世の中にツールがイロイロあるのは理解した上で、大量に紹介するとやっぱり迷うので、似たようなツールや個人的に使わないツールはバッサリ省いています。 パワポで描く まずはPowerPointです。 エンジニアや技術系の方は「パワポで図を描くのはちょっと、、、」と思われるかも知れませんが、状況によってありだと思っています。 パワポのメリット パワポは、ビジネスユーザーならほぼ誰でも使える システムを作る時に、お客さん側も含めた関わるメンバー全員がITに詳しいとは限りません。しかしそういう人にもシステムに対する理解は最低限していただく必要があります。システム構成図とか特に興味がない人に説明するときに「新しいツールをいれてください」というのはハードルが高いです。 パワポ
Diagram as Code6 different ways to turn code into beautiful architecture diagrams
A free and instant collaborative whiteboarding tool.
AWSの構成図を作成する際に便利なツールを紹介します。 vscodeの拡張プラグイン「Draw.io Integration」です。 インストール方法 vscodeの左サイドにあるExtensionsをクリックし、検索窓にdrawと入力するとDraw.io Integrationが表示される。そして、Installボタンをクリックするとインストールされる。 作画ツールの表示 インストール後に新規ファイル作成ボタンを押し、 拡張子を.drawioにすると自動的にvscode上でdrawioの作画ツールが表示される。 これを使って簡単なAWSの構成図を描いていきます。 VPCを作成して、その中にパブリックサブネット、EC2インスタンス、インターネットゲートウェイを作成する。 使い方 AWSアイコンの追加 下部の+More Shapesを押すと、アイコンのセットが表示される。 ここからAWS 1
【新機能】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
「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
はじめに GitHub で Mermaid がサポートされました。 Mermaid は図やグラフを描画するの独自の記法を持ちます。 その記法を Markdown のコードブロック中に記述するだけで図を描画できるのが便利です。 ...便利なのですが、記法が独特なことや機能が豊富なことから、とっつきにくいところもあります。 弊社[1]では みんチャレ 開発の情報共有ツールとして esa.io を活用しており、 esa も Mermaid をサポートしており以前から活用していました。 この記事では、私がこれまでに活用してきた中から特に便利だと感じた機能を紹介します。 ちなみに Zenn も Mermaid をサポートしているため図を描画できます。 Gantt ガントチャートです。 私が Mermaid を使いたいと思ったきっかけの機能です。 まずは、一番シンプルな例を書きます。 gantt Co
システムの構成を社内で共有したり外部に説明したりする際に、システム構成図を作成した経験のあるエンジニアは多いはず。ダイアグラム作成ソフト「Diagrams」を使うと、AnsibleやSubiquityといった「Infrastructure as Code(IaC)」に関連するサービスのように、プログラミング言語のPythonでコードを書くことで、クラウドやオンプレミスの構成図を描くことができます。 Diagrams · Diagram as Code https://diagrams.mingrammer.com/ まずはDiagramsの動作に必要なパッケージをインストールします。今回Diagramsのインストールに利用するのはUbuntu 18.04です。 sudo apt install -y python3 python3-pip graphviz 続いてDiagramsをインスト
こんにちは、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
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者であっても図を描く機会は多いです。仕様書のようなドキュメントであったり、システム構成図の中に書いたりといった具合です。ドローソフトウェアを使ったり、スライド作成ソフトウェアを使ったりしまうが、操作やメンテナンスが面倒でストレスです。 そこで使ってみたいのがDiagramsです。開発者らしく、コードで図を描けます。 Diagramsの使い方 コードで書いた内容で図が書けます。 シンプルな例。 k8sなどの構成にも使えます。 GCP用。 DiagramsはAWS、GCP、k8s、AzureそしてAlibaba Cloud向けにアイコンが用意されています。これらのサービスを作ったシステム構成を考えた時に、Diagramsを使えばメンテナンスもしやすい図が描けます。 Diagrams
Create beautiful network diagrams. In minutes.Create easy-to-follow network diagrams without a designer.
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
みなさん、自宅のネットワーク図って何のツールで書いてますか？私は過去に次のようなツイートをしたところ案外バズったことがありました。 「自宅のネットワーク図って何のツールで書いてます？」 「それ自宅で必要？」 終 制作・著作 ━━━━━ ⓃⒽⓀ— hnw (@hnw) 2019年9月29日 これがバズるのは自宅にヤバいネットワークを組んでいる人が一定数いる証拠と言えるかもしれません。リプライ欄を見ても、みなさんそれぞれ工夫されていることがわかりました。 私個人はネットワーク図を書くのに色々なツールを試してきたのですが、イマイチ定着しないのが悩みでした。最初は頑張って書くのですが、いつの間にかメンテをサボってしまい、いざネットワーク構成をいじる段になると情報が古くて役に立たないことが複数回ありました。悲しいですね。 プロなら仕事で使う定番ツールがあるのかもしれませんが、私のようなアマチュアの立
Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
GitHub、Markdown構文でフローチャートやクラス図、ガントチャートなどのダイアグラムを表示できる「Mermaid」をサポート開始 GitHubは、Markdown構文で記述するとダイアグラムを表示できる「mermaid」のサポートを発表しました。 You can now embed diagrams directly into your Markdown files, Issues and PR comments using Mermaid. Learn more - https://t.co/gfmNOp3HeJ — GitHub (@github) February 14, 2022 Markdown構文とは、テキストを簡単な記号で修飾することにより、HTMLを記述するよりも手軽にハイパーリンクや見出しなどを記述できる記法です（このPubickeyの本文も、ふだんはMarkd
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
最近 Twitter を見ていたら Diagrams という Python 書いたら良い感じのシステム構成図ができるサービスが流れてきた。 diagrams.mingrammer.com プライベートのインフラ構成図は今まで Cacoo で描いていたけど、今回 Diagrams に移行した。 なぜ Diagrams で書くのか プライベートでは terraform だったり Kubernetes のマニフェストを1つのリポジトリで管理している。 AWS の構成や Kubernetes に変更を加える時はいつもそのリポジトリにコミットしてもろもろ終わった後に Cacoo の図を更新していた。 Cacoo は書きやすくて好きなのですが、自分としては図を更新する前の時点で達成感に満たされていつも終わっていました。 そしてどんどん実態と差分が広がり更新しなくなりました。 Diagrams を使うこ
こんにちは。 ご機嫌いかがでしょうか。 "No human labor is no human error" が大好きなネクストモード株式会社 の吉井です。 今回は AWS Perspective を紹介します。 Developers.IO を読んでくださっている方々はシステム担当者(アプリもインフラも)が多いと想像しています。 みなさまは詳細度、解像度の高低はあれどアーキテクチャー図を作成していることと思います。 個人的な意見ですが、作成ドキュメントの弱点は ”更新されないことがある” ことにあると考えています。 変更管理を細かく行っている企業ならそんな心配は要らないかもしれませんが、大抵の場合システム稼働日数が増えれば増えるほどドキュメントは置いてけぼりになりがちです。 それはある意味理解ができてドキュメントは無くてもシステムは動くので、システム構成変更時のドキュメント更新の優先度が下
こんにちは、初めまして、フロントエンドエンジニアの八木です。 普段、モノタロウのECサイト開発を行っています。 エンジニアだとシステム構成図やシーケンス図など、何かと図を作る機会が仕事柄たくさんあります。その多くは要件定義や詳細設計などのフェーズで、人に何かを伝えるために使われます。 最近では、テック系のイベントやセッション登壇などでも使われる機会が多く見られるようになってきましたね。 エンジニアが図を用いる理由 図を用いる理由は文字だけでは直感的に伝わりづらいなど様々ですが、共通して言えることはビジュアライズすることによって皆が同じ認識を持つことにあります。 しかし、人によって描き方が異なっていたり、描き方に正解はないことから個人の解釈にずれが発生することが多々あります。 例えば以下の例を考えてみます。 伝えたいことは次の通り。 WebサーバーはNginxを使用 Appサーバー上ではDo
フローチャートやネットワーク図を作成するには、ExcelやPowerPointを使うのではなく、操作性が作図に最適化された、専用の作図ツールを用いるのが便利だ。用意されたテンプレートの中から作りたいイメージに近いものを選択し、ドラッグアンドドロップでアイコンなどのパーツを追加していくことで、見た目のよい図が簡単に作成できる。 こうした作図ツールは、かねてよりオンラインで使えるサービスが存在していたが、最近は操作性もより洗練されたほか、メンバーを招待して共有できるコラボレーション機能が強化されるなど、次代のニーズに合わせて大幅な進化を遂げている。今回は、無料で利用できるプランがあることを条件に、オンラインで使える3つの作図サービスを紹介する。 さまざまな部署のニーズに対応、国産の老舗サービス「Cacoo」 「Cacoo」は、作図サービスの中で老舗と言えるのが「Cacoo(カクー)」だ。 フロ
タダです. 皆さん,普段システムの構成図ってどうやって管理していますか？Excel や PowerPoint,専用のツールを使われていたり色々な方法で管理されているのですが,以前 PlantUML の形式で作図できる「AWS-PlantUML」を紹介させてもらいました. sadayoshi-tada.hatenablog.com 今回も同じコードでの作図ですが Python で記述できるツールの「Diagrams」を紹介します. github.com Diagrams の概要 Diagrams の導入 Diagrams での描画 Web3層構造 サーバレスアーキテクチャ まとめ Diagrams の概要 「Diagrams」は Python でクラウドサービスのアーキテクチャを作図するツールです.「Diagrams」では AWS のほか,Azure,GCP,Alibaba,Oracle C
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
こんにちは。 近頃はとにかく暑すぎて、ネッククーラーが手放せないkonnoです。 今回は、ChatGPTでガントチャートを表示できるのか、ということにチャレンジしたいと思います。 とはいえ、ChatGPT単体で、図を生成できるわけではなく、今回は「Show Me」というプラグインを利用してみます。 このプラグインを利用すると、Mermaid記法というモノに基づき、テキストで記載した内容から図を生成することが可能になります。 Mermaid記法については、以下を参照してください。 mermaid.js.org ただ、Mermaid記法は以下のようなもので、人にとっては難解な部分も多いです（私の脳がついていけてないだけ？）。 以下は、ガントチャートを作成するためのMermaid記法ですが、これを覚えて作成するのは、なかなか難しいと感じます。 gantt title ガントチャート dateFo
米Googleは2月17日（現地時間）、クラウドサービス「Google Cloud Platform」（GCP）のアーキテクチャダイヤグラム（システム構成図）を作成できるWebサービス「Google Cloud Architecture DiagrammingTool」の提供を始めた。利用料は無料。 ユーザーはGCPのサービスのアイコンや図形を配置することで、クラウドを活用したシステムの構成を図として整理できる。一から構成を作るだけでなく、プリセットを図面に配置してからそれをカスタマイズできる機能も搭載。作った図は、PNGやSVGなどのファイルとして出力することもできる。 関連記事 前澤氏の“お金配り”、アプリ化したらアクセス殺到 数十万トラフィックをさばく「kifutown」の裏側 ZOZO前社長・前澤友作氏の“お金配り”をスマホアプリ化した「kifutown」。時には短い期間に数万、数
プレゼンテーションや企画書などに挿入する模式図やフローチャートを描く際、どのようなツールを利用しているだろうか。「Microsoft Excel（エクセル）」や「Microsoft PowerPoint（パワーポイント）」を利用している、という人も多いと思う。Microsoft Office製品の中には、模式図などの描画に最適な「Microsoft Visio（ビジオ）」というツールもあるのだが、Officeスイーツとは別パッケージになっていることもあり、利用者はそれほど多くないようだ。 頻繁に模式図やフローチャートなどを描くのであれば、このVisioと似た機能を持つドローイングツール「draw.io」を利用することを薦めたい。「draw.io」は無償のドローイングツールで、JGraph社を中心にGitHubで開発が行われている（会員登録も不要で、商用利用に制限はない）。オンラインサービス
Create sequence diagrams with simple online tool Swimlanes.io is a free webapp for making sequence diagrams. You simply edit the text on the left and the diagram is updated in real time. You can download your sequence diagrams as images or distribute with a link. title: Welcome to swimlanes.io One -> Two: Message note: **swimlanes.io** is a simple online tool for creating _sequence diagrams_. Edit
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
【12/24にGitLab対応!】テキストで自在に「描く」- KrokiではじめるDiagram as CodeMarkdownGitLabasciidocVisualStudioCodekroki これは、 NTTコミュニケーションズ Advent Calendar 2020 25日目の記事です。 昨日は @tnoyama さんの「TEKTONとArgoを比較してみた」でした。お楽しみいただけましたか？ Krokiとは 本記事では、テキストからの図表生成ツール Krokiを紹介します。最新バージョンは0.9.0です。 公式docs: Kroki! GitHub: yuzutech/kroki: Creates diagrams from textual descriptions! 概要 Kroki!は、テキストから統一的なAPIで、 UML C4 データ可視化 その他図表 を、PNG,
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く