Movatterモバイル変換

はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数！

アプリで開く

はてなブックマーク

閉じる

テクノロジー
Markdownでシーケンス図とかが書けるMermaid記法で業務フローを書いたら意外とイケたので自分なりのコツを紹介してみる | DevelopersIO

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

Markdownでシーケンス図とかが書けるMermaid記法で業務フローを書いたら意外とイケたので自分なりのコツを紹介してみる | DevelopersIO

テクノロジーカテゴリーの変更を依頼記事元:

dev.classmethod.jp

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

782usersがブックマークコメント

コメント

51

ゲスト

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

おすすめタグタグについて

よく使うタグ

Markdownでシーケンス図とかが書けるMermaid記法で業務フローを書いたら意外とイケたので自分なりのコツを紹介してみる | DevelopersIO

782 users

dev.classmethod.jp

おすすめタグタグについて

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント51件

注目コメント
新着コメント

kazuau仕様書とかワークフローとかって自分が書いたらそれで終わりってわけにはいかないことがほとんどだから、独自なツールはなかなか使えない。Office365で編集してTeamsで共有できるような形式にしておいてって言われがち。

design

2022/04/30リンク

その他

rrringressこういうの作るときが一番楽しい。使い道は知らん

2022/04/30リンク

その他

PhenomenonPlantUMLよりなんか見た目がイケてるよね。

2022/04/30リンク

その他

zkqMermaidって本家のヘルプがわかりやすくて網羅性もあるのに、なぜ人は記事を書いてしまうのだろう。我々はそれを解明するためにアマゾンの奥地へと向かった…

2022/05/01リンク

その他

sbrtnpg業務フローをシーケンス図で書くのいいな。差分管理がしやすいのがいいよね。早速やってみる

2022/05/01リンク

その他

kekeraこういう設計書は、図で確認したいわけではなく図で編集したい勢がいるので、記述→描画だけでは共有に向かないんよね。

2022/05/01リンク

その他

sechsplantUMLとの相互変換がないと今までの資産がーと言われがち。MSOfficeはそのへん最強なんだよね。

2022/05/01リンク

その他

arebouyamarkdownと版管理は情報リテラシーとして普及するべき。文書管理できてないところ多すぎ。

2022/05/01リンク

その他

ydf仕事だとastah professional版を毎年グループ全員分を買っているが、他部門にわたすときはPDF化している。

2022/05/01リンク

その他

agektmrJoplinというMarkdownのメモ帳アプリでもMermaidがインラインで記述できる。

2022/05/01リンク

その他

dekirukana_hate[[開発] [Mermaid] [記法] ]

2023/04/13リンク

その他

tolkine9999h改めて見ると凄い汎用性あるのね。今悩んてるやつこれで書いてみよう。

2022/11/14リンク

その他

tecklMermaid記法、初めて書いてみたけどめっちゃ楽だった…Notionとの連携も最高（単にcacooなどが苦手なだけとも言う）

2022/09/07リンク

その他

xlc試しに状態遷移図を書いてみたらとても読める代物ではなかった。残念ながらExcelの作図はまだ手放せない。

2022/05/02リンク

その他

loveanimeあくまで自分向けな感じもする

2022/05/02リンク

その他

yojikgraviz/PlantUML より色々な意味で楽だし、GIthubが対応してくれたおかげで使える場面が広がったと思う。

2022/05/01リンク

その他

eergaofficeで共有した場合の編集がやりづらいから、markdown+mermaid+gitにしている。(officeも慣れるときっと良いツール)

2022/05/01リンク

その他

sbrtnpg業務フローをシーケンス図で書くのいいな。差分管理がしやすいのがいいよね。早速やってみる

2022/05/01リンク

その他

MtAsuka図は図としてWYSIWYGで書けてMarkdownなりテキスト形式でエクスポートできればいいだけでないの？わざわざ図をコードで書きたい気持ちがわからない。

2022/05/01リンク

その他

denden_engineerpythonでmermaid使いたい

2022/05/01リンク

その他

EngineerYtrgithubで対応したならビューア不要にできるね

2022/05/01リンク

その他

tmatsuuわいわい

2022/05/01リンク

その他

securecatチーム内共有鑑みるとMiroのシーケンス図とかのほうがいいかな

2022/05/01リンク

その他

Andrion定期的にMermaid最高って話が出てくるけど、全関係者にアプリとMarkdownと記法を学ばせる手間を考えたら、MS Visioでも使った方が幸せになれる。

2022/05/01リンク

その他

reitanigawaマークダウンでシーケンス図。後で

2022/05/01リンク

その他

hirorinyaおっしゃれー

2022/05/01リンク

その他

ydf仕事だとastah professional版を毎年グループ全員分を買っているが、他部門にわたすときはPDF化している。

2022/05/01リンク

その他

fashi構造図だからデザインは如何様にもできるのだろうけどこれは矢印小さくてちょっと読みにくいな

プログラミング

2022/05/01リンク

その他

strow0343可読性がイマイチなのでコメント入れてやりくりする感じになりそう。バージョン管理面は優秀だと思うけど

2022/05/01リンク

その他

perl-o-palmarkdownはテキストで読みやすいのがいいのにビューワー必須なのって…って議論はもうケリがついているのかな。あんまり言ってると老害って言われそう。

2022/05/01リンク

その他

buhohoまあ良いんじゃない、便利ツール使うのは気晴らしにもなるし。チームでやるときはまた一つ覚える必要なツールが増えるので、ケースバイケースで合意とってから導入して欲しいけど

2022/05/01リンク

その他

kekeraこういう設計書は、図で確認したいわけではなく図で編集したい勢がいるので、記述→描画だけでは共有に向かないんよね。

2022/05/01リンク

その他

remonoilGitLabでも```mermaidで使えるらしい。GW明けに試す

2022/05/01リンク

その他

ardarim見た感じPlantUMLとほぼコンパチなのか。

2022/05/01リンク

その他

nisendよさそう

2022/05/01リンク

その他

arebouyamarkdownと版管理は情報リテラシーとして普及するべき。文書管理できてないところ多すぎ。

2022/05/01リンク

その他

sechsplantUMLとの相互変換がないと今までの資産がーと言われがち。MSOfficeはそのへん最強なんだよね。

2022/05/01リンク

その他

chiroruxx自分が書いたらそれで終わりじゃないからこそ、バージョン管理しやすい形式で書かないとね。みんな使っていこうぜで終わりだと思う。

2022/05/01リンク

その他

mrmt組織図や入退社フローの視覚化とかにも便利。mmdc使えば非対話処理もできる。

2022/05/01リンク

その他

akira28良さげ

2022/05/01リンク

その他

ゲスト

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

アプリのスクリーンショット

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

関連記事

usersに達しました！

さんが1番目にブックマークした記事「Markdownでシーケ...」が注目されています。

気持ちをシェアしよう

ツイートする

Markdownでシーケンス図とかが書けるMermaid記法で業務フローを書いたら意外とイケたので自分なりのコツを紹介してみる | DevelopersIO

こんにちは、臼田です。みなさん、業務設計してますか？(挨拶今回はMarkdownでシーケンス図やフローチ...こんにちは、臼田です。みなさん、業務設計してますか？(挨拶今回はMarkdownでシーケンス図やフローチャートなどの図を記述できるMermaidを使って業務フローを書いてみたら、意外と書けたので自分なりのTipsを紹介したいと思います。その前に注意点として、まだMermaidを使い始めたばかりなので、「もっとこうしたらいいぞ」とか「こっちのほうがいいぞ」とかあれば建設的なフィードバックとしてSNSとかでいただけるとありがたいです。あと業務フローって表現しましたが、人によって思い描く業務フローが違うと思うので、業務フローの定義に関するツッコミはご容赦ください。私が今回Mermaidで書いたのは以下の図です。(内容はブログ用に簡素化しました) この図のコードは以下のとおりです。(後ほど解説します) sequenceDiagram autonumber actor お客様 partic

ブックマークしたユーザー

haretaL5122025/08/03
kakk912023/08/25
ken1028-kufc2023/08/23
ichiyu2023/07/27
fbis2023/07/20
klov2023/06/07
dekirukana_hate2023/04/13
dicolt772023/03/25
techtech05212023/02/15
walkalone2023/02/12
dmizuno552022/12/01
hibinotatsuya2022/11/17
tolkine9999h2022/11/14
teckl2022/09/07
yogasa2022/06/10
xbwcx8392022/06/06
cutc-mt2022/06/04
kwy2022/05/27

すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025Hatena. All Rights Reserved.

設定を変更しましたx

[8]ページ先頭

©2009-2025 Movatter.jp