システム構成図をテキストで

Gigazineさんでdrawthe.netを取り上げていたので紹介です。使い方はGigazineさんのほうが丁寧なので、気になる方はチェックしてみてください。（2020年12月1日、追記） drawthe.netとは cidrblock/drawthe.netは複雑なネットワーク図も「テキストで書いてブラウザ上でSVGレンダリングできるようにしよう」というコンセプトのもと開発されたツールです。下図のように複雑な構成図も精度高く描くことができます。 拡大してみると情報量が多いこと、またいかに整っているかがわかると思います。 デモサイトも用意されているので、サクッと試したい場合はコチラが便利です。コードはGitHubで公開されています。更新が2017年末で止まってしまっているのが玉に瑕ですが、十分な性能を発揮してくれます。 drawthe.netを使いたい理由 美しい構成図といえばInter

[masarusanjp]

このymlを作るビジュアルエディタが欲しくなりそう

[moromoro]

今度のAWS構成図これでつくろ

[endok]

この細かさだとUMLでは厳しいのかな。使うときが来るかもなのでブクマ。

[gnety]

こういうツールではできないことがあるから、そこを見極めることが重要。複雑なものにいきなり適用しようとすると必ず失敗する

[masatomo-m]

設計に使うには難解すぎるので、LaTeXとかの組版データみたいなものだと思えば良さそうな感じがする。普段から使うものではなく、外向けの資料を高品質に清書したい時に使うとか？

[tookikimie]

「変更に対する差分がわかるようにしたい」これが切実なんだけど、なかなか決定版ないよね……(自分が使うならともかく、同僚がな……)

[hide0414]

[

[shimarisugi]

ソースファイルから自動で出来たらいいのに。ハードウェア記述言語だとソースからシステム図を自動で作ってくれるんだが(それで間違いに気づいたりする)

[gadgeterkun]

うーむ。。どうなんやろ。システム構成図、結局draw.ioに戻ってしまう

[sigwyg]

んーこれは結局エディタが要る系…

[crosscrow]

draw.ioみたいにスタンドアローンアプリやVSCODEのアドオンとして提供してくれないとなかなか導入しづらい

[itchyny]

学生時代に M4 circuit-macros をよく使っていた経験からすると、インクリメンタルには手書きできるけど、時間が経ってあとから見たら全く分からないということが起きるので、結局ビジュアルエディターが欲しい。

[tossy_yukky]

テキストならバージョン管理もしやすいな

[miguchi]

“cidrblock/drawthe.net”

[dtpg]

いいね。

[kamocyc]

PlantUMLやmermaid.jsみたいな感じか？

[sharaku3eyes]

良さそう

[zgmf-x20a]

30年くらい前にawkとTeXでこれよりずっと簡単なのを作ったことを思い出した。

[regularexception]

テキストで管理はしたい(git管理)が、UIはグラフィカルで頼む

[strawberryhunter]

Excelのコネクタがもっと賢ければいいのに。

[onesplat]

これはよさそう

[dogusare]

各機器のconfigをそのまま読み込んでくれると（本末転倒

[takuver4]

システム図。

[hatebu_ai]

この発想はなかんづく

[yabu_kyu]

AAで作るとかではなかった。「更新が2017年末で止まってしまっているのが玉に瑕ですが」うーん…。

[pre21]

理路整然としていればどんなに重厚であっても「わかりやすい！」と思う人と、そうでない人がいまして、「誰でも」ってことはないと思うんよね。”誰でも縦横のラインが整ったキレイな構成図を書ける”

[yogasa]

結局外部のサービスに食わさないといけないんでしょっていう

[numanuma08]

メモ

[kagehiens]

こういうツールは良いよね。次の問題はこのYAMLを仕上がりイメージしながら書く方法になる訳だが……。

[tgk]

drawthe.net

[sasasin_net]

AWSの現物から生成したいかも。AWSの現物からFormer2でCloudFormation出るので、コンバーター書いて、drawthe.netに食わせたら良さそう（大変そう）

[tkmkg8m]

最近はmermaid.js使ってテキストベースで描くことが多かったけど今度drawthe.netも使ってみよう。mermaid.jsだと少し複雑になると見づらくなりがちなので期待。

[ssids]

git のリビジョンを指定すると、その間の diff が具体的にどういう構成変更なのか図示してくれたらうれしい