Markdownでシーケンス図とかが書けるMermaid記法で業務フローを書いたら意外とイケたので自分なりのコツを紹介してみる | DevelopersIO
こんにちは、臼田です。 みなさん、業務設計してますか？(挨拶 今回はMarkdownでシーケンス図やフローチャートなどの図を記述できるMermaidを使って業務フローを書いてみたら、意外と書けたので自分なりのTipsを紹介したいと思います。 その前に 注意点として、まだMermaidを使い始めたばかりなので、「もっとこうしたらいいぞ」とか「こっちのほうがいいぞ」とかあれば建設的なフィードバックとしてSNSとかでいただけるとありがたいです。 あと業務フローって表現しましたが、人によって思い描く業務フローが違うと思うので、業務フローの定義に関するツッコミはご容赦ください。私が今回Mermaidで書いたのは以下の図です。(内容はブログ用に簡素化しました) この図のコードは以下のとおりです。(後ほど解説します) sequenceDiagram autonumber actor お客様 partic
ARCHITECTURE.mdというものを書いてみた - maru source
こんにちは丸山@h13i32maruです。システム全体を簡単な図とテキストでまとめる「ARCHITECTURE.md」というものを最近知りました。これは良さそうと思い、JasperのARCHITECTURE.mdを書いてみました。 jasperapp/jasper/ARCHITECTURE.md ARCHITECTURE.md自体の目的は「プロジェクトへの新規参加者が全体像の把握を効率的に行えるようにする」という感じです。書き方の指針や注意点などは考案者による記事を見てもらうのがよさそうです。また良いサンプルとしてrust-analyzerというOSSのARCHITECTURE.mdが紹介されています。 https://matklad.github.io//2021/02/06/ARCHITECTURE.md.html https://github.com/rust-analyzer/ru
PlantUMLでドメイン駆動設計のモデリングを実装する（Nizi Project編） - ContractS開発者ブログ
こんにちは！株式会社Holmesでエンジニアをしている平田です。 Holmesでは、現在、プロダクト開発にドメイン駆動設計を取り入れようと、社内で勉強会の開催や各メンバーが勉強したことを共有しあったりしています。 ドメイン駆動設計に取り組むにあたって、大切なことのことの一つにより良いモデルを作成する、モデリングがあります。 今回はそんなモデリングをPlantUMLで行う方法について、一例をご紹介できればと思います。 ※本記事のモデリング手法は以下の書籍を参考に行なっております。 PlantUMLとは なぜPlantUMLを用いるのか ユースケース図 全体像 @startuml,@enduml actors usecases rectangle ドメインモデル図 全体像 packages objects notes direction relations label 振り返り 最後に Pla
GitUML
Understanding source code is every programmer's biggest challenge GitUML helps programmers understand new code more quickly. Understand code quickly Rapidly generate diagrams from programming source code. Diagrams from git repositories - automatic diagram updates when you push! Upload source code files Live UML Fiddle converts source code into UML as you type UML Fiddle (Python) UML Fiddle (Javasc
VSCodeでDraw.ioが使えるようになったらしい！ - Qiita
追記 versionによっては設定を変えないとエクスポートができないようです。 エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。 現状バージョン0.4ではこちらの設定が必要となります。 VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 2020/10/18追記 現在のバージョン0.7ではdrawio拡張子のエクスポートがうまくいかないようです。 その場合はオフラインモードに移行変更していただくか、drawio.pngやdrawio.svg拡張子でファイルを作成してもらうことで直接編集もできた上で、エクスポートとせず末尾の拡張子ファイルとして利用することができます。 はじめに VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、 導入方法と使い方を備忘として残していきます。
【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜 - Qiita
draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。 「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です 😊 ※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメです。 ツイッター公式アカウント 公式ブログ ショートカット ショートカット集です。机の上に置いて覚えましょう。 Line / 線 まずは最も頻繁に使う Line(線)の使い方からご紹介します。 矢印をまっすぐに揃える ちまちまと矢印の線をドラッグして微調整し
UMLの爆速プレビュー環境をVisual Studio Code + PlantUML Server on Dockerで簡単に構築する | DevelopersIO
PlantUMLとは PlantUMLはシンプルな記法でUMLダイアグラムが作成できる、超便利なツールです。UMLをはじめ、以下のような図の作成もサポートしています。 ワイヤーフレーム アーキテクチャ図 仕様及び記述言語 (SDL) Ditaa ガントチャート マインドマップ WBS図(作業分解図) AsciiMath や JLaTeXMath による、数学的記法 Entity Relationship diagram 実際に業務で使う場合はテキストを書く→画像に書き出すという順序になりますが、基本的にはプレビューを確認しながら書くと効率良く作成できます。 プレビューを確認しながら書くには、例えばWebアプリなども公開されているのでそちらで済ませてしまう方法もあります。 https://planttext.com しかしながら テキストをファイルとして残しながら作業したい場合はやはりローカ
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モデリングの本質 第2版を読んだ - takatoshiono's blog
きっかけ そういえば少し前にチームで振り返りをしている時に以下のようなKPTが出たのを思い出した。 初期のDB設計に時間をかけすぎた (Problem) いや、でもDB設計に時間をかけるのはいいこと (Keep) 次の開発でもDB設計に時間をかける (Try) そして、それから少し経ったある日、プルリクエストにこんなコメントがあった。 「未来のストーリーを使ってモデルを揺さぶってみるといいかも」 それでこの本の存在を認識したのだった。そしてもっとモデリングをうまくやりたい気持ちしかない我々はこの本を読むしかないのだった... モデリング この本で紹介されていたモデルの定義は「ある人にとっての、ある状況、あるいはある状況についての概念の明示的な解釈」。これは「システム仕様の分析学」の著者であるブライアン・ウィルソン(Brian Wilson)という人の言葉らしい。で、この定義のかなめは「ある
Win/Mac/Linuxのクロスプラットフォームに対応したシーケンス図エディタ「daisy sequence」がリリース。
Win/Mac/Linuxのクロスプラットフォームに対応したシーケンス図エディタ「daisy sequence」がリリースされています。詳細は以下から。 daisy sequenceはMichinari Nukazawaさんが開発＆公開したシーケンス図エディタで、Electron製でWindows/Mac/Linuxのクロスプラットフォーム用バイナリが公開されています。 Release "daisy sequence" is (not) UML sequence diagram editor. for win / mac / linux !https://t.co/iVCpQS46m9 pic.twitter.com/tvBDw99vTn — Michinari Nukazawa (@MNukazawa) 2018年3月1日 概要 daisy sequenceは、Win/Mac/Linux
ちょっとしたシーケンス図を書くのにatom-mermaidが便利すぎる話 - Qiita
この記事のターゲット ・処理の流れを整理するためにシーケンス図が描きたい ・PowerPointやExcelは死んでもごめん ・エディターにはAtomを使っている mermaidって何よ 正確にはmermaid.js。JavaScriptのチャート作成ライブラリのこと。フローチャートからシーケンス図まで作れる優れもの。 https://mermaidjs.github.io 本来はブラウザで利用するものですが、個人的にAtomエディター上で描きたいところ。 偉大すぎる先人 同じことを考える人がすでにいて、Atom用のパッケージを作成してくださっていました。 感謝の意を込めていいねして利用させていただきました。 MermaidのプレビューができるAtomパッケージを作った https://atom.io/packages/atom-mermaid 利用方法 Atomでatom-mermaid
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
Visual Studio Code で UML を描こう！ - Qiita
この記事では、Windows 環境に Visual Studio Code と PlantUML をセットアップする手順を説明します。 PlantUML とは PlantUML は、以下のような図をテキストで素早く描くためのオープンソースプロジェクトです。 シーケンス図 / Sequence diagram ユースケース図 / Usecase diagram クラス図 / Class diagram アクティビティ図 / Activity diagram コンポーネント図 / Component diagram 状態遷移図 / State diagram オブジェクト図 / Object diagram 環境 下記の環境で動作確認しました。 Windows 10 Pro (64bit) Visual Studio Code 1.11 Java SE Runtime Environment
Atom と PlantUML で快適シーケンス図駆動開発ライフ | DevelopersIO
サーバーサイド開発担当のエンジニアが「設計と実装を進めようとしている」という背景で話を進めます。 PlantUMLは強い 「認識合わせ」という名目でホワイトボードに図を書いて会話することがよくあります。共通言語で会話してあいまいなところを少なくしたら、マネージャーも安心感がありますし、プログラマも自分がやるべきことに集中できますね。 …3日経ちました。あのとき描かれていたホワイトボードの図のとおりに、実装することになりました。認識の齟齬をなくしてくれた貴重な図です。写真に撮りました。どこに保存してたっけ。やっぱり変更したくなったらどうしましょう。またホワイトボードに書き起こす？DRYじゃないですねえ。 そこで、UML図 が登場します。表現したい図を電子データで作成、保存できて、あとで見るときも役に立ちますね。が、しかし、UML図はそれはそれでやや手間がかかるところもあります。作図を助けてく
若手エンジニア必読！超絶分かるユースケース図－全知識と書き方５ステップ
要求定義フェーズでよく使われるユースケース図。先輩に書けと言われたけど、「そもそもユースケース図って何？」「必要性は？」「どう書けば良いの？」と困っている方も多いのではないでしょうか。 若手SEなど難しいイメージを持っている方も多いですが、実はけして難しいものではありません。この記事で解説している基礎知識を抑えてしまえば、たった５つのステップで作成できてしまいます。 この記事では、ユースケース図の基礎知識から５つの作成ステップまで、エンジニアが抑えておくべきユースケース図の全知識を徹底的に分かりやすく解説します。 この記事を読み終えたとき、若手エンジニアもユースケース図を書けるようになっているでしょう。この記事を参考に、ユースケース図を書いてみましょう。 １．ユースケース図とは ユースケース図とは、「ユーザーの視点でシステムの利用例を表現する図解術」です。 海外では「Use Case Di
AtomとPlantUMLで爆速UMLモデリング - Qiita
PlantUMLは、DSL(ドメイン特化言語)をコーディングすることでUMLが描ける、Java製のツールです。 今回はAtomとPlantUML Viewerパッケージを使い、ライブプレビューを見ながらUMLをモデリングする環境を作ってみました。 イメージ図↓ 編集履歴 2016/03/22: 中華フォント対策を更新 環境 Windows 10 Pro 64bit Atom Version 1.0.10 Chocolatey v0.9.9.8（セットアップで使用） ※ この記事ではWindowsでのセットアップですが、MacやLinuxでもほとんど同様に実行可能かと思います。 セットアップ ライブラリインストール PlantUMLを使用するには、動作環境であるJavaとレンダリングライブラリのGraphvizのインストールが必要です。 Windows 10にしてから、そういえばJavaも入
PlantUMLをAtomで使ってみよう！泣きながらシーケンス図！
PlantUMLを使ってシーケンス図を書こう！！ PlantUMLって？ テキストベースでUMLが書ける便利なかんじのやつです。 これいいな！って思ったのは なんか書くのが簡単そう。個人的にはExcelでちょっとずつ四角を動かしていく作業がなくなるだけで天と地の差。 テキストベースなのでGitで管理できる！ いろいろな画像形式で出力できる。 Eclipseでやろうとして挫折した過去があるので、これからはこれを使っていこうよ！という話し。 あと、うちの部署の新人さんたちはUMLなんかまったく使っていないので、そろそろクラス図とかシーケンス図とかかけてもいいかなと思った。教育用。 なぜPlantUML使おうと思ったか はぁ（ため息x10000） 突然お客様から「シーケンス図」を提供してほしいと言われた。 前々から思ってたんだけど、Excel（私の場合はLibreOfficeのCalcだけど）で
ネットワーク図を作る時に便利なアイコン集のまとめ(2016年度版)
以前「ネットワーク図を作る時に便利なアイコン集のまとめ(2013年度版)」という記事をエントリしたのですが、それから時間が経過したので2016年度版を作ってみました。 ※ 2020年 12月05日 「Kubernetesのアイコン集」と「ヤマハネットワーク機器のアイコン集」を追加、その他のリンク集に「資料で使う技術/プロダクトロゴのリンク集 – Qiita」を追加いたしました。 ※ 2018年 11月28日 Alibaba Cloud iconsを追加いたしました。 ※ 2017年 12月22日 ニフクラ アイコン＆シンボルを追加いたしました。 ※ 2017年11月18日 cocha-iconsを追加いたしました。 ※ 2017年8月27日セキュリティアイコン/Security icons – Security along DesigNを追加いたしました。 ※ 2016年12月26日 「G
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Kibelaで記事を書くのにReal World PlantUMLを活用する - Qiita
