【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜 - Qiita
draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。 「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です 😊 ※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメです。 ツイッター公式アカウント 公式ブログ ショートカット ショートカット集です。机の上に置いて覚えましょう。 Line / 線 まずは最も頻繁に使う Line(線)の使い方からご紹介します。 矢印をまっすぐに揃える ちまちまと矢印の線をドラッグして微調整し
PlantUMLを使った宇宙服のモデリング - Qiita
はじめに 趣味で宇宙開発を行う団体「リーマンサット・プロジェクト」がお送りする 新春アドベントカレンダーです。 リーマンサット・プロジェクトは「普通の人が集まって宇宙開発しよう」を 合言葉に活動をしている民間団体です。 他では経験できない「宇宙開発プロジェクト」に誰もが携わることができます。 興味を持たれた方は https://www.rymansat.com/join からお気軽にどうぞ。 RSP02でシステム電源開発とSpaceSuitsサークルでパーツのモデリングをさせていただいています。 やりたいことがあれば、"できる" "できない"に関わらず試すことができるのが趣味ならではでないでしょうか。 今回、PlantUMLを使ってPLSS(生命維持装置)をモデリングしようと思います。 実際にはSysMLを使いモデリングする方がいいらしいです。 PlantUMLの使い方については下記リンク
Visual Studio Code ではじめるシーケンス図
テキストでUMLやシーケンス図、クラス図などを作成できる言語です。 ダイアグラムをテキストで記述できるため、Gitで管理することもできます。 Visual Studio Codeでは、次のようにPlantUMLプレビューでダイアグラムを確認しながら作成できます。 まず、Visual Studio Codeが端末にない人はインストールをしてください。 Visual Studio Code – Code Editing. Redefined また、Javaもインストールが必要となります。 無料Javaソフトウェアをダウンロード インストールが完了したら、Visual Studio Codeで拡張機能としてPlant UMLを追加します。 Marketplaceから「plantuml」と検索してインストールします。 下のリンクからでもインストールできます。 marketplace.visuals
テキストでUMLを書く - Qiita
みなさんちゃんと設計書書いてますか？僕はあんまり書きません。一所懸命図を起こしても、実際にソースをアレしてインターフェースを揉んだりしてるうちにもっと綺麗なのを思いついて修正が必要になることも多いですよね。で納期に追われてドキュメント更新がおざなりになってソースと図が乖離していき、メンテされないお荷物が増えていく。 設計は大体風呂とか夢とか頭の中でやって、ある程度規模があって整理したい場合や、他人に共有したい場合に脳内にある図を起こす、という使い方が多いです。 図を起こした後でも設計を見直したり機能拡張することはありますよね。そんなとき、いちいち線の重なりがどうだとか考えたくないです。どうせ後で直すし。ドキュメントに綺麗な図を書いてくれるのはありがたいのですが、どんなツールやプラグインを使ったかわからず、一部追加するのに全部一から作り直したことありませんか？ astah*でつくって画像だけ
UMLモデリングの本質 第2版を読んだ - takatoshiono's blog
きっかけ そういえば少し前にチームで振り返りをしている時に以下のようなKPTが出たのを思い出した。 初期のDB設計に時間をかけすぎた (Problem) いや、でもDB設計に時間をかけるのはいいこと (Keep) 次の開発でもDB設計に時間をかける (Try) そして、それから少し経ったある日、プルリクエストにこんなコメントがあった。 「未来のストーリーを使ってモデルを揺さぶってみるといいかも」 それでこの本の存在を認識したのだった。そしてもっとモデリングをうまくやりたい気持ちしかない我々はこの本を読むしかないのだった... モデリング この本で紹介されていたモデルの定義は「ある人にとっての、ある状況、あるいはある状況についての概念の明示的な解釈」。これは「システム仕様の分析学」の著者であるブライアン・ウィルソン(Brian Wilson)という人の言葉らしい。で、この定義のかなめは「ある
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
Atom と PlantUML で快適シーケンス図駆動開発ライフ | DevelopersIO
サーバーサイド開発担当のエンジニアが「設計と実装を進めようとしている」という背景で話を進めます。 PlantUMLは強い 「認識合わせ」という名目でホワイトボードに図を書いて会話することがよくあります。共通言語で会話してあいまいなところを少なくしたら、マネージャーも安心感がありますし、プログラマも自分がやるべきことに集中できますね。 …3日経ちました。あのとき描かれていたホワイトボードの図のとおりに、実装することになりました。認識の齟齬をなくしてくれた貴重な図です。写真に撮りました。どこに保存してたっけ。やっぱり変更したくなったらどうしましょう。またホワイトボードに書き起こす？DRYじゃないですねえ。 そこで、UML図 が登場します。表現したい図を電子データで作成、保存できて、あとで見るときも役に立ちますね。が、しかし、UML図はそれはそれでやや手間がかかるところもあります。作図を助けてく
PlantUML Web APIをSpark Framework + Kotlinなウェブアプリにしてみた - Islands in the byte stream
PlantUML を使うとき、 java -jar plantuml.jar だとほんの小さなダイアグラムの生成にも数秒かかってしまいます。ローカルではそれでいいかもしれませんが、ウェブアプリに組み込むのはちょっとイマイチですよね。 PlantUMLはJava製ツールなのでJavaのウェブアプリにしてしまえば高速になるはず、と思ってやってみました。 リポジトリ: https://github.com/gfx/plantuml-service ウェブアプリといってもパスが /svg/:source しかないような最小限のものです。 :source はPlantUML Text Encodingでエンコードされたソース、または生のPlantUMLソースです。特にキャッシュなどはしませんが、手元のMBAだと小さなダイアグラムの生成で70msほどになったので実用に耐えそうです。 PlantUMLは
yUMLでQiitaにテキストベースでUMLを埋め込んでみる。Qiita, esa, GitHub Wiki なんでもござれ - Qiita
yUMLでQiitaにテキストベースでUMLを埋め込んでみる。Qiita, esa, GitHub Wiki なんでもござれyuml yUMLとは？ Create and share simple UML diagrams in your blogs, wikis, forums, bug-trackers and emails. yUMLはシンプルなUMLを作成し、ブログやWikiやフォーラムやバグトラッカーやEmailでシェアします。 yUMLでできること 無料範囲 プレーンテキストで作図ができる 作図結果をリンクとして貼り付けることで画像を埋め込むことができる 作図対象のテキスト自体をURLに埋め込み、画像を埋め込むこともできる 作図に使ったテキストと記事本体を同じ場所で管理できる つまり、esaやGitHubのWikiやHatena BlogなどにUMLをテキストベースで埋め込むこ
Redmine で技術仕様書を書こう
はじめまして！ 株式会社 Aiming の土井です！ エンジニアをやっております！ 今回の開発者ブログでは、情報共有ツールとしての UML の活用方法について、現場での取り組みをご紹介させていただければと思います！ 技術仕様書の“図” どうやって書いてますか？ 株式会社 Aiming では、プロジェクトの Wiki やバグトラッキングに Redmine をメインに使っています。みなさんも既にご存知だったり、実際にバリバリ活用されていることとおもいます。 また、企画仕様書、技術仕様書などは Redmine の Wiki やエクセルに代表されるオフィススイート等を活用して作成しますが… 図の表現を求められるような仕様書を作る時に、どうやって作成しようか悩んだことはありませんか？ 標準ペイントソフトで頑張って作成 オフィススイートに含まれる、ドローツールを使って図を作成、画像吐き出し というケー
超高機能マークダウンエディタ「StackEdit」の Welcome Document を和訳してみた - Qiita
私は自分のブログ（WordPress）や、GitHubで管理しているアプリのREADME、はてはミーティングの議事録とか、およそドキュメント書く時にはマークダウンエディタ「StackEdit」を使っている。 Webアプリなのでネットワークに繋がればどこでも使えるうえ、一度アクセスしておけばオフラインでも使える。さらに作った文書はGoogle Drive等に同期しておけるのでファイルはどこからでも参照できるうえ、そのまま各種ブログに公開までできてしまう優れものだ。ほとんど全ての機能が無料で使えるのも素晴らしい点の一つなのだが、私はマークダウンで作った文書をPDF化してエクスポートしたかったこともあって、このたび永久ライセンス（日本円で¥3,000というのがまた安い！）を購入しちまいました。 結構バージョンアップも頻繁に行われていて、最新版ではついにマークダウンでUML図表まで描けるようになっ
作図系ツール・ライブラリまとめ
diag.md シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ GraphViz http://www.graphviz.org/ C製 Doxygen, Moinmoinなどと連携可能 ブロック図、クラス図、ネットワーク図など PNG, SVGなど 出力可能形式一覧 JavaScript（Emscripten）版もある。リアルタイムプレビュー出来て便利 https://github.com/mdaines/viz.js PlantUML Java製 シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる PNG, SVG, LaTeX, ASCII出力 なんとワイヤーフレームも作れる。アイコンとかも入れられる。 オ
Perlのモジュールを静的解析してPlantUMLでクラス図をレンダリングするやつ - hitode909の日記
仕事のコードで，子クラスがたくさんいる難しいクラスがいて，継承関係を整理したいけど，どこがどうなってるのか一見すると分からなかったので，静的解析してクラス図をレンダリングするやつを作った． github.com package2plantumlclassdiagramっていうコマンド(長い)に，このファイルたちをレンダリングしてくれ，って渡して，PlantUML形式のファイルを作る PlantUMLでPNGとかに変換 という手順で使う． % package2plantumlclassdiagram ~/Plack/lib/**/**.pm > plack.plantuml % GRAPHVIZ_DOT=$(which dot) plantuml -charset UTF-8 -tpng plack.plantuml Plackのソースコード全体をレンダリングするとこんなかんじで，継承してる
Uml速習会
シリコンバレーのスタートアップを数多く取材する中で気付いた「シリコンバレーにおけるディシプリン（規律）の存在」や「General Electric（GE）やIBM、SAPといった老舗企業が必死になってシリコンバレーのスタートアップを真似している理由」、そして「日本企業がイノベーションを実現するための処方箋」について解説します 詳しく知りたい場合は「GE 巨人の復活」をご覧下さい。 http://www.nikkeibp.co.jp/atclpubmkt/book/17/P55110/ 今後の記事は「シリコンバレーNext」をご覧下さい。 http://itpro.nikkeibp.co.jp/siliconvalley/
PlantUML + IntelliJ IDEA - タケユー・ウェブ日報
恥ずかしながらPlantUMLというツールを知らなかったんだけど、IntelliJ IDEAのPlantUMLプラグインで初体験。なにこれ快適。 テキストファイルなので、シーケンス図、クラス図などいろんな設計がVCSで管理・マージできるすばらしさ。 IntelliJ IDEAのPlantUML integrationでサクサクライブビュー。マウスとキーボードを往復せずとも書けるので思考を途切れさせません。 プロジェクトファイルと一緒に管理していれば不整合も減らせそう。 導入手順 プラグインリポジトリで'PlantUML integration'検索、インストール。PlantUML本体も含まれる？ので別途インストールは不要です。 シーケンス図以外の描画に使う'graphviz'をインストール。macなら'brew install graphviz'でOK。 プラグインの設定でgraphviz
UMLでRailsモデリング - Qiita
Railsエンジニアな皆さん、モデリングしてますか? ひとりでシステム構築しているなら不要かもしれませんが、チームで活動し、ある程度の規模のシステムを構築/改修する場合は、いきなり実装するのではなくモデリングをしましょう! モデリングの手段はたくさんありますが、統一記法であるUMLに従うといろいろ下記のようなメリットを享受できてよいかと思います。 視覚的な表現によって構造・振る舞いを直感的に把握できる 開発に関わるメンバ全員が共通の言語でコミュニケーションできる 本記事ではRailsシステムをUMLでモデリングする際の表現方法を紹介します。想定する読者は、上位者の指示の下Railsシステムの構築/改修をすることができ、今後ステップアップとして実装設計とか構造設計と呼ばれるフェーズを独力で実施できることを望むような人(およびその上位者)です。これによって少しでも多くの人が実装設計できるように
Markdownテキストでシーケンス図とフローチャートを描く - Qiita diagram sequence
つい先日、とあるシステムの処理の流れと一部処理のフローチャートを付けた見積り資料を書くことになり、ちょうど良い機会だったので、MarkdownでUML図表が描ける「StackEdit」を使って、オールMarkdownで資料を作成してみた。 いやぁ、打ち込んだテキストがリアルタイムに図表化されていく様は、とても新鮮で、そしてすごく面白かった。資料が出来上がった後の達成感というか、完成した図表を見た時の感動が結構はんぱない。技術系の資料作成でこんな良い体験ができたのは初めてかもしれんな…(笑) ──と、結構感動的な体験ができるMarkdownでのUML図表作成なんだが、せっかくなのでそれの書き方を含めてもう少し突っ込んだTIPSとしてまとめておこうかと思った次第。 Markdown+UML とは？ とりあえず、「Markdown+UML」というのは私の造語だ。まぁ、正確に言うなら「UML di
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Qiitaで図形描画する方法 - Qiita
plantuml
ソフトウェア設計のすすめ
