Markdownでシーケンス図とかが書けるMermaid記法で業務フローを書いたら意外とイケたので自分なりのコツを紹介してみる | DevelopersIO
こんにちは、臼田です。 みなさん、業務設計してますか？(挨拶 今回はMarkdownでシーケンス図やフローチャートなどの図を記述できるMermaidを使って業務フローを書いてみたら、意外と書けたので自分なりのTipsを紹介したいと思います。 その前に 注意点として、まだMermaidを使い始めたばかりなので、「もっとこうしたらいいぞ」とか「こっちのほうがいいぞ」とかあれば建設的なフィードバックとしてSNSとかでいただけるとありがたいです。 あと業務フローって表現しましたが、人によって思い描く業務フローが違うと思うので、業務フローの定義に関するツッコミはご容赦ください。私が今回Mermaidで書いたのは以下の図です。(内容はブログ用に簡素化しました) この図のコードは以下のとおりです。(後ほど解説します) sequenceDiagram autonumber actor お客様 partic
UMLとかAWS構成図とかを描くツール
UMLとか構成図とかの図を描くの何のツールを使えばいいか迷いませんか？私は迷います。 ですので、最近使っているツールを紹介します。 世の中にツールがイロイロあるのは理解した上で、大量に紹介するとやっぱり迷うので、似たようなツールや個人的に使わないツールはバッサリ省いています。 パワポで描く まずはPowerPointです。 エンジニアや技術系の方は「パワポで図を描くのはちょっと、、、」と思われるかも知れませんが、状況によってありだと思っています。 パワポのメリット パワポは、ビジネスユーザーならほぼ誰でも使える システムを作る時に、お客さん側も含めた関わるメンバー全員がITに詳しいとは限りません。しかしそういう人にもシステムに対する理解は最低限していただく必要があります。システム構成図とか特に興味がない人に説明するときに「新しいツールをいれてください」というのはハードルが高いです。 パワポ
グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO
データアナリティクス事業本部 サービスソリューション部 サービス開発チームのしんやです。 Notionの直近リリースノートに「Mermaidっていうマークダウン構文がNotionで使えるようになったよ！」という情報が載っていたので、試してみた内容を軽くではありますが紹介したいと思います。 目次 Mermaidとは 実践 #1. フローチャート #2. シーケンス図 #3. クラス図 #4. 状態遷移図 #5. ER図 #6. ジャーニーマップ #7. ガントチャート #8. パイチャート #9. 要件図 まとめ Mermaidとは Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。 コードから良い感じのグラフを生成できるイメージについては下記動画を参照頂くと良さそうです。 実践 では早速実践してみたいと思いま
ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など） - Qiita
※ 参考記事「PlantUML を VSCode で利用したいけど、プレビューが表示されずエラーが出る」 参考（PlantUML 導入後の編集中画面） 2-2. ER図 今回作成したER図 Qiita記事でも、コードブロック内でPlantUMLの構文がそのまま使えます。（このER図は、Qiitaのコードブロックで表示させています） 今回作成したER図のPlantUMLの表記 @startuml yonde ' hide the spot hide circle ' avoid problems with angled crows feet skinparam linetype ortho entity "families" as families { id -- name nickname introduction created_at updated_at } entity "users
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
GitHub、Markdown構文でフローチャートやクラス図、ガントチャートなどのダイアグラムを表示できる「Mermaid」をサポート開始
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
Visual Studio CodeがMarkdownのサポートを強化。ファイルのドロップでリンクを自動作成、見出しへの参照一覧など。Visual Studio Code 1.67（April 2022）
Visual Studio CodeがMarkdownのサポートを強化。ファイルのドロップでリンクを自動作成、見出しへの参照一覧など。Visual Studio Code 1.67（April 2022） マイクロソフトはコードエディタVisual Studio Code（以下、VSCode）の最新版となるバージョン1.67（2022年4月）をリリースしました。 The April release of @code is here! Check out the latest: Explorer file nesting Toggle inlay hints Markdown code navigation ... & much more! Release notes: https://t.co/VAPbRhj2U4 Download: https://t.co/1CSkQpMbwd pic
GitHub で Markdown の中に Mermaid を埋め込んだら表示してくれる機能がバレンタイン デーにリリースされました。 今まで Mermaid は知らなくて、テキストでアクティビティ図やクラス図みたいなものを書く必要があるときは PlantUML を使ってましたが GitHub が対応したということで Mermaid に入門してみようと思います。 因みに、この記事を書き始めた時点では、まだ何もやっていないので Mermaid については名前と図が書けるらしいということしか知りません。 では、やってみようと思います。 試すための環境 Visual Studio Code の Markdown Preview Mermaid Support を入れることで Markdown のプレビュー機能が Mermaid のプレビューに対応します。 導入前はこんな感じですが 拡張機能を入れ
マイクロサービス化するならリビルドで！ビジネスロジックをGoで書き直してわかったこと - MonotaRO Tech Blog
この記事では モノタロウがGoとprotobufで進める爆速マイクロサービス開発とそれを支えるプロセス - MonotaRO Tech Blog のうち、主にアーキテクチャにおける詳細について紹介します。 自己紹介 マイクロサービス化について 課題を認識する スコープと技術選定 ゴールイメージを共有する 既存コードから分かった問題点 曖昧なデータ構造 処理フローの混在 アドホックなデータ取得 効果的な改善を行う 処理フローを分割する N+1問題とロジックの独立性を考慮した設計 安全に移行する 実行時のデータを取る 新旧比較による検証 まとめ 自己紹介 藤本 洋一 プラットフォームエンジニアリング部門 CTO-Officeグループ AVLチーム 楽天、SaaSベンチャーを経て、モノタロウに入社してマイクロサービス化にとりくむエンジニアの話 2019年5月入社。商品検索基盤のマイクロサービスと
GitHubは、Wikiページに画像をドラッグ＆ドロップするだけで自動的にアップロードされ、ページに画像が追加される新機能を発表しました。 同社新CEOのThomas Dohmke氏がツイートしています。また、GitHubのChange Logによると2月14日付けで「Upload images to Wiki pages」としてこの機能が追加されているのが分かります。 Shipped today: You can now upload images to Wiki pages. Same UI as in issues and pull requests - drag and drop, select the file, or paste the image. https://t.co/0z1bGTFIvs pic.twitter.com/kC8s9dZIak — Thomas Dohm
GitHubは14日、README.mdファイルなどで用いられているMarkdown構文で図を描くことができる「Mermaid」と呼ばれる記法に対応したことを発表した（公式ブログ, Publickeyの記事, Gigazineの記事, Codezineの記事）。 Mermaid記法を用いると、テキストから、フローチャート、シーケンス図、クラス図、ステート図、ER図、ガントチャート、パイチャート、ユーザージャーニーなどの図を自動生成することができるという。具体的には例えば以下のような構文で、A→B/C→Dのようなフローチャート等を書くことができる。 ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` その他にも各地に既に多くのサンプルが上がっているが、これまでMarkdownに図を埋め込む場合は、別途画像ファイルを生成してそれを参照するし
「百聞は一見にしかず」ということわざもあるように、どんなに丁寧に説明されても分からなかったものが一枚の画像を見るだけで理解できることは多いものです。ソフトウェア開発プラットフォームのGitHubで、テキストから自動でグラフを生成してくれるライブラリ「Mermaid」が公式にサポートされ、利用可能になったとアナウンスが行われています。 Include diagrams in your Markdown files with Mermaid | The GitHub Blog https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/ GitHubはプログラマーが利用するサイトということでテキスト重視の設計になっており、これまで視覚的な説明を行うには画像を埋め込む必要がありました。今後はMermaidを利用する
【12/24にGitLab対応!】テキストで自在に「描く」- KrokiではじめるDiagram as Code - Qiita
【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,
本記事は、「ChatGPT選手権！エンジニアリングに組み込んでみたらこうなりました LT大会」の発表の書き下ろしになります。 実際の発表は5分のLTでしたので、この記事のダイジェスト版と言えるかと思います。 こちらの記事の方がかなり情報量が多いため、実際に発表を聞いていただいた方も、そうでない方も楽しんでいただける内容になっているかと思います。 ChatGPTとの対話も含めて全て読むには非常に情報量が多いので、お時間のある時にじっくり読んでいただくことをお勧めします。 プロローグ さて、時は遡ること3ヶ月半前、ChatGPTが登場し、週末に戯れていた私は衝撃を受けました。 それがこちらの投稿です。 ツイートのスレッドを追っていただくとわかるのですが。ChatGPTと対話を重ねていくことで、twitterっぽいフロントエンド実装をReact/TypeScript/ CSSを駆使してつくってく
こんにちは。マニュアル作成・ナレッジ共有ツール「NotePM」ブログ編集局です。 Markdownは便利な記法ですが、標準ではごく基本的な構文しか提供していません。そのため、多くの開発者によって様々な拡張が行われています。システム設計を行う際に使われるUMLを描画したいというニーズがその一つです。 今回はMarkdownの中にUMLを埋め込めるエディタを紹介します。Webベース、GUIそしてWebサービスとカテゴリごとに紹介しますので、あなたにとって最適なMarkdown環境を選んでください。 GUI エディタ Boost Note Boost NoteではPlantUMLを使ったUML描画が可能です。日本語はエラーになるようです。 Boost Note is a powerful, lightspeed collaborative workspace for developer team
mermaidチート表｜ききよ
あちこち調べまわるのに疲れたので自分用に作成します。 (7/10更新[途中上げ) mermaidとはmd(マークダウン)形式の時、図が描けるやつ(ざっくり) githubがこれに対応したので、readme.mdが画期的になったとかなんとか。 左に打ち込んだコードが右みたいな図になる mermaidの導入VScodeの拡張機能ですべて済む。 Markdown Preview Mermaid最低限これだけあればおｋ。 Markdown Preview Enhancedも加えるとGithubとかmermaid公式の色合いになるぞ。 書き方.mdに書くのが前提。 ```mermaid 【この間に書く】 ````(Shift+@)で上のように囲むとその間だけその言語対応になる。 場合から使い分けるmermaid いくつか種類があるので、使い分けに。 なお、 ```mermaid ```は省略する。
こんにちは。sweeepの清川です。みなさんの会社では「Notion」使っていますか？sweeepでは、情報共有やプロジェクト管理にNotionを大活用しています。 今回は日々の仕事にも役立つNotionで「簡単にフローチャートを書く方法」をご紹介します。Mermaidという言語を使いますが、直感的に書けるので覚えてしまえば難しくはありません。どうぞチャレンジしてみてくださいね！ ※こちらの記事はkiyo個人noteの転載です。 1. コードブロックを呼び出すフローチャートを作成したいページに「/code」と打ち込むと、コードブロックが呼び出されます。このブロック内でMermaidを記述し、フローチャート図を作成していきましょう。 コードブロック内で言語を選択できるようになっているので、「Mermaid」を選択し、コードと同時にプレビューが表示されるよう「Split」を選択します。 2.
mermaidでフローチャートを描く
楽にきれいにフローチャートを描く方法を探してたらmermaidに行きついたので、mermaidを使ってフローチャートを描く方法をまとめておきます。 公式docsはこちらです。 ブラウザでmermaidを使う こちらのエディタを使うとブラウザ上でサクサクmermaidが書けます。 こんな感じで左側がエディタ、右側がプレビューで書いたdiagramをリアルタイムで確認しながら使えます。即書きたい派の人はこれがいいかも。 Sample Diagramsから色んな図のテンプレを挿入することができます Actionsから画像ファイルにエクスポートしたりも VSCodeでmermaidを使う VSCodeでmermaidを使う場合は、こちらの拡張機能を入れるとよいらしい mermaid記法をハイライトで表示してくれて書きやすくなります こちらはVSCodeでmermaidで書いた図をプレビューで見せて
Zenn で mermaid.js によるダイアグラムが表現できるようになりました。ZennのMarkdown記法一覧も更新されています。この記事では mermaid.js を使っていくつかの図をかいてみます。 基本的な使い方 mermaid.jsのドキュメントを見ながらいろいろな図を書いてみる 各種エディタでプレビュー このあたりを記録します。 基本的な使い方 コードブロックで囲んで言語名を mermaid とすることで、自動的にレンダリングされます。いまのところ、mermaid.jsの8.10.xを読み込んで使っています。 ```mermaid graph TB A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] ```
My Redmine インストール済みプラグイン
Redmineのクラウドサービス「My Redmine」では、厳選した以下のRedmineプラグインがご利用になれます。プラグインにより標準のRedmineの機能が拡張され、活用範囲が一層広がります。 ※お客様ご指定のプラグインのインストールは承っておりません。 UI Extension - クラス図やシーケンス図などの図を描画 / セレクトボックスの検索 / バーンダウンチャート IPアドレスフィルター - IPアドレスによるアクセス制限 チケットパネル - チケット一覧をカード形式でかんばん風に表示 Issue Templates - チケット新規作成時のテンプレートを登録 View Customize - CSSとJavaScriptによる画面カスタマイズ メッセージカスタマイズ - 画面の文言をカスタマイズ My Page Blocks - マイページを拡張 UI Extensio
使ってみよう！VSCode+mermaid
mermaidとは フローチャート等の絵をコードから作成できる、JavaScriptのライブラリです。 ……とはいえ普段JSに触れることがないのでワタクシはVSCode+Markdownで書いてます。 ちょっとしたタスクやスクリプトの処理を他の人にレクチャーしたり引き継いだりするときに、説明しつつササッと手を加えてプレビューできるのが良いな～！って思ってます。 なお、この記事ではグラフの形など、お作法的な箇所は無視してますし記載しません。 関連サイト様です！ 開発 様 公式マニュアル 様 環境の準備・説明 VSCodeインストールします プラグインで「Markdown Preview Mermaid Support」をいれます 補足ですが、Markdownを使うなら以下も入れておくと便利だと思います。（他にもおすすめあれば誰か教えて！） Markdown All in One1)Markd
記事を参考にしたのが分かるように、 「爆速」を使わせてもらいました。 noteには、ChartGPTと外部アプリPlantUMLを使って マインドマップを作るという記事（参考記事）は既にあります。 参考記事 ChatGPTにマインドマップを作ってもらったら理解速度が爆速になる件｜Abiru｜note ChatGPTとPlantUMLを使った爆速マインドマップ作成術！｜カレーちゃん｜note Notionで折角やるので、 Notionと Notion AIだけで作業を完結させる そのNotionのページを 「公開」して共有する という図を描くだけでなく、情報（資料）としても活かそうというのが今回の話になります。 Notionとはそもそも何かという事は、私の記事が参考になれば幸いです。 仕事でのNotionの活用方法ついてAbiruさんを真似て 「Notion」ヴァージョンをAIにお願いしてみ
Mark Richards, Neal Ford 著, 島田 浩二 訳ソフトウェアアーキテクチャの基礎 Fundamentals of Software Architecture 日本語版は紙、英語版はKindleで読みました。Kindle版は図がカラーで見れます。 本書を読んだ感想を書いていきます。 Chapter 1. IntroductionSoftware ArchitectureとはSoftware Architectureの定義が業界でよく定まっているわけではないところから話が始まります。 その理由として、Microserviceような新しいArchitectの台頭によってsoftware architectの役割が拡大していることが挙げられています。 また、本書はsoftware architectを一度作ればその後は変更の対象にならない静的なものではなく常に漸進的に変化して
はてなブログでmermaidの図を描く Githubでもサポートされたmermaidをはてなブログでも描けないか試したところ多少なんとかなったのでメモ。 ```mermaid graph TB H["Hatenaで"] M["mermaid"] H-->M ``` 👇上のmarkdownコードがこうなる graph TB H["Hatenaで"] M["mermaid"] H-->M mermaidって何？ GraphvizやPlantUMLのようにコードでフローチャートのような図を描ける。 JSで書かれているのでHTML上にそのままSVG画像として出力できる。 mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git gr
こんにちは。マニュアル作成・ナレッジ共有ツール「NotePM」ブログ編集局です。 Mermaid記法はテキストのみで、ガントチャートや円グラフなどのチャートや、クラス図やシーケンス図と言ったUMLで用いられるシステム可視化表現を行えます。 このMermaidは様々なMarkdownエディタでも利用できます。今回はGUIとWeb、それぞれに分けてMarkdownエディタを紹介します。 NotePMでは他のMarkdownエディタと同じくコードブロックに対して mermaid を付けることでMarmeid記法が使えるようになります。右側のライブプレビューでは、編集した内容が即座に反映されます。 Mermaidの他、PlantUMLや数式（TeX記法）にも対応していますので、開発者などの情報共有にも利用できます。システムに関する情報を記しておくことで、社内ナレッジの共有と蓄積に役立ててください。
フローチャートをNotionで簡単に作れると聞き、早速子どもと一緒に「朝に勉強するフローチャート図」を作ってみました。このフロー図を書くために使うのは、マークダウン構文のMermaidという言語。 最初はMermaidって何？という状態でしたが、調べてみると簡単でコードを書いたことのない非エンジニアの自分でも、あっという間に作成することできました！今回は、Mermaidでどうやったらワークフローを書くのか、かいつまんでご紹介します。 1. コードブロックを呼び出すフローチャートを作成したいページに「/code」と打ち込むと、コードブロックが呼び出されます。このブロック内でMermaidを記述し、フローチャート図を作成していきましょう。 コードブロック内で言語を選択できるようになっているので、「Mermaid」を選択し、コードと同時にプレビューが表示されるよう「Split」を選択します。 2
RedMica/RedmineのUIを拡張する「UI Extension」（RedMica公式プラグイン） 2023-01-20 12:00 更新 • 分類: plugin, redmica 「RedMica UI Extension」は、Redmine互換のオープンソースソフトウェア「RedMica」の機能を拡張するRedMica公式プラグインです。Redmineではバージョン4.1以降で利用できます。 本プラグインは、ファーエンドテクノロジー株式会社が提供するRedmineのクラウドサービス「My Redmine」の独自機能として開発されました。オープンソースソフトウェアとして公開しているので、どなたでもお使い頂けます。 現在、UI Extensionでは以下の機能を備えています。 添付ファイルのプレビュー テキスト（Mermaidマクロ）でクラス図やシーケンス図などの図が描ける セレ
WEELメディア事業部AIライターの2scです。 みなさん、シンプルな記述でチャートやグラフが作れる「マーメイド記法」はご存知ですか？ こちらは2019年の『JavaScript OS Awards』にノミネートされた、クールなプログラミング言語。なんと無料版を含むChatGPTからの生成が可能で、慣れれば一瞬でテキストが図式化できちゃうんです！ ということで当記事では、ChatGPT×マーメイド記法で作れる図式の種類やその作り方・裏ワザを紹介していきます。 完読いただくとしばらくの間、なんでも図式化しちゃいたくなるかも…… ぜひ、最後までお読みくださいね。 なお弊社では、生成AIツール開発についての無料相談を承っています。こちらからお気軽にご相談ください。 →無料相談で話を聞いてみる マーメイド記法とは？ 「PowerPointでのプレゼン資料作りが面倒くさい！」「企画書に図式を入れると
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mermaid 入門してみたメモ(flowchart で力尽きた…)
GitHub、Wikiページにも画像をドラッグ＆ドロップで追加可能に
GitHub、Markdownで図を描けるMermaidに対応 | スラド デベロッパー
テキストからグラフを自動で作成してくれるライブラリ「Mermaid」をGitHubがサポート
一緒にスクラム開発: GPT-4と人間が共創するプロダクトの進化 スプリント #1
【2024年版】MarkdownでUMLが使えるエディタ・Webサービス おすすめ11選！
NotionのMermaidを使って、簡単にフローチャートを作る方法 | sweeep株式会社
Zennが mermaid.js によるダイアグラム表記に対応したので試す
NotionとAIで図を作ると爆速で共有できる件｜えっぐらす
📗 ソフトウェアアーキテクチャの基礎を読んだ感想 | Happy developing
はてなブログでmermaidの図を描く - はしくれエンジニアもどきのメモ
Mermaid記法の使えるMarkdownエディタ、Webサービスまとめ
NotionのMermaidを使えば、めちゃくちゃ簡単にフローチャートを作れるという話｜yukka kiyo
RedMica/RedmineのUIを拡張する「UI Extension」（RedMica公式プラグイン）
ChatGPTでマーメイド記法を行うには？具体的な手順と注意点を徹底解説 | WEEL