【地上の】mermaid でちょっと大きめの図を描く【星】

2023/08/18 87 users plantUML 融通 題材 mermaid.js フロー

はじめに 細かいところに PlantUML ほど融通が利かないと言われる mermaid.js ですが、逆に言えばそこまで複雑なフローでなければそこそこ描けるやんけ！ということで mermaid.js で中規模以上のフロー図を描くときに使えそうな記法などについて書いてきます。 題材 良い感じの題材が思いつかなかったので、今回は地上の... 続きを読む

技術者向けTips: はてなブログでMermaid記法を利用する方法 - はてなブログ開発ブログ

2023/03/01 71 users Mermaid記法 はてなブログ開発ブログ はてなブログ

いつもはてなブログをご利用いただきありがとうございます。 さて、はてなブログには、 はてなブログは、Mermaid記法に対応する予定はないでしょうか？ というご質問をいただくことがあります。はてなブログはJavaScriptやCSSなどをご自身で記載し、自由にカスタムできるプラットフォームです。Mermaidの対応も、少し設... 続きを読む

ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など） - Qiita

2022/07/29 155 users vscode Qiita plantUML 作図 ＥＲ図

はじめに データベース設計のER図について、VSCodeなどで作成する以下３つの方法を比較した記事です。 Draw.io PlantUML Mermaid 以前、Webアプリケーションを作成した際には、 Draw.io を使用して、作図しました。 （そのアプリのER図を今回サンプル図としています） 最近、 PlantUML を利用するようになり、ER図や、シ... 続きを読む

テキストから図が生成できるMermaidでAWS構成図をつくる - Qiita

2022/07/06 117 users GitHub Qiita IntelliJ vscode 方法

はじめに Mermaid記法で記述したテキストからダイアグラムの図が生成できるMermaidでAWS構成図をつくる方法を紹介します。 また、MermaidはGithubやQiitaなどのWebサービスやVSCodeやIntelliJなどのツール、コマンドやWebシステムでも使用できますので、詳細は[【Qiitaでも使える】テキストから図が生成できるMermaidに... 続きを読む

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

2022/04/30 706 users Markdown DevelopersIO 臼田 挨拶 コツ

こんにちは、臼田です。 みなさん、業務設計してますか？(挨拶 今回はMarkdownでシーケンス図やフローチャートなどの図を記述できるMermaidを使って業務フローを書いてみたら、意外と書けたので自分なりのTipsを紹介したいと思います。 その前に 注意点として、まだMermaidを使い始めたばかりなので、「もっとこうしたら... 続きを読む

よくあるAWSサーバーレス構成のシーケンス図をMermaidで描いてみた | DevelopersIO

2022/02/18 176 users Markdown DevelopersIO 若槻 UML図

こんにちは、CX事業本部 IoT事業部の若槻です。 今までシステムのドキュメントなどでUML図を使用したい場合は、別途PlantUMLで画像ファイルを生成し、MarkdownやAsciiDoc内に配置するということをしていました。 しかしこちらの記事の通り、Mermaidを使用すればMarkdown内で直接UML図の定義を記述し、GitHub上でそのまま... 続きを読む

GitHubで使えるようになった Mermaid の便利なところ

2022/02/16 142 users GitHub Markdown みんチャレ esa.io 弊社

Mermaid は図やグラフを描画するの独自の記法を持ちます。 その記法を Markdown のコードブロック中に記述するだけで図を描画できるのが便利です。 ...便利なのですが、記法が独特なことや機能が豊富なことから、とっつきにくいところもあります。 弊社[1]では みんチャレ 開発の情報共有ツールとして esa.io を活用して... 続きを読む

グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO

2021/12/23 282 users Notion DevelopersIO プロ 目次 グラフ

データアナリティクス事業本部 サービスソリューション部 サービス開発チームのしんやです。 Notionの直近リリースノートに「Mermaidっていうマークダウン構文がNotionで使えるようになったよ！」という情報が載っていたので、試してみた内容を軽くではありますが紹介したいと思います。 目次 Mermaidとは 実践 #1. フロ... 続きを読む

簡単にガントチャートとかクラス図とか書けるやつ - Qiita

2017/07/26 634 users ガントチャート UML Qiita 図形 かんじ

mermaid は、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.js の機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、 ヘルプ はGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ できること 以下の図が描け... 続きを読む

mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す - Qiita

2015/05/24 770 users Qiita カント シーケンス mermaid.js 実例

mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることは... 続きを読む