人魚なのに尾が二股に分かれている。 しかもその尾を持ち上げ股を開いている。 どうしてこうなったのか調べてみた。 スターバックスのロゴ 世界で最も有名な人魚と言えば、やはりこいつだろう。 Warszawska róg Szerokiej w Tomaszowie Mazowieckim, w województwie łódzkim, PL, EU. CC0, Public domain, via Wikimedia Commons, Link ご存知スターバックスのロゴである。現在のロゴでは大事なところが色々と隠されているので分かりにくいが、最初のデザインでは人魚であることが一目で分かる。 Chris Brown from Melbourne, Australia, CC BY 2.0, via Wikimedia Commons, Link 上半身が裸で胸を露出し、二股の尾を自ら持ち上げ
自身のプライオリティによりますが、いくつか。 Markdownで幅広く再利用性を利かせたい、長期的に丁寧に版管理したい 自分自身の操作性、描きやすさと、見た目 俄然手軽に、短期的に、Onlineでいつでもどこでも いずれかという視点で考えると良いのかなと思い、並べてみました。 1. 長期的に: Markdownで幅広く再利用性を利かせたい、丁寧に版管理したいなら Markdownで描くことのメリットは再利用性。 将来的に追記・編集、自分以外の誰かが手を入れる可能性が高い。 現在のドキュメントだけでなく多種説明資料、媒体に転用する可能性がある。 ...という点で差分管理をしたいなら、以下。 VSCodeでPlantUML、Mermaid 上記参考で以下。 Alt+D でプレビュー起動。 Ctrl + Shift + P でコマンドパレットを起動し、出力。 png, svg, eps, pdf
Markdownでシーケンス図とかが書けるMermaid記法で業務フローを書いたら意外とイケたので自分なりのコツを紹介してみる | DevelopersIO
こんにちは、臼田です。 みなさん、業務設計してますか？(挨拶 今回はMarkdownでシーケンス図やフローチャートなどの図を記述できるMermaidを使って業務フローを書いてみたら、意外と書けたので自分なりのTipsを紹介したいと思います。 その前に 注意点として、まだMermaidを使い始めたばかりなので、「もっとこうしたらいいぞ」とか「こっちのほうがいいぞ」とかあれば建設的なフィードバックとしてSNSとかでいただけるとありがたいです。 あと業務フローって表現しましたが、人によって思い描く業務フローが違うと思うので、業務フローの定義に関するツッコミはご容赦ください。私が今回Mermaidで書いたのは以下の図です。(内容はブログ用に簡素化しました) この図のコードは以下のとおりです。(後ほど解説します) sequenceDiagram autonumber actor お客様 partic
こんにちは。ユアマイスターでプロダクトマネージャーをしています、稲垣といいます。 最近、業務でChatGPTを使いまくっているのですが、ちょっと個人的に感動する使い方を見つけたので紹介します（既に知ってるぞ！という方、すいません）。 プロダクト開発において、業務フローって必要になること多いですよね。でも書くの大変。Draw.ioとかFigmaとか便利なツールも出てるけど、それでも大変。 さあ、下記のようにプロンプトを書いてみましょう。 一般的な受注業務の業務フロー図を作りたいです。Mermaid Markdown形式で出力してください。 # 制約条件 - 「・」「?」は使用しないでください ChatGPTの出力結果のこれをコピーして、 Notionに貼りましょう（「コードブロック」を選択してください）。 「コード」を選ぶこの領域にペーストするすると・・・。 うおおおおお。 業務フローが自動
Mermaid flow
Mermaid Flow is an online Mermaid JS editor that takes this a step further and simplifies the creation and maintenance of your Mermaid Diagrams. Mermaid Flow generates Mermaid JS code which can be rendered directly in GitHub README's and also stored and version controlled in code. This app makes it easy to create Mermaid JS diagrams with its visual and interactive editor, so you get the stability
UMLとかAWS構成図とかを描くツール
UMLとか構成図とかの図を描くの何のツールを使えばいいか迷いませんか？私は迷います。 ですので、最近使っているツールを紹介します。 世の中にツールがイロイロあるのは理解した上で、大量に紹介するとやっぱり迷うので、似たようなツールや個人的に使わないツールはバッサリ省いています。 パワポで描く まずはPowerPointです。 エンジニアや技術系の方は「パワポで図を描くのはちょっと、、、」と思われるかも知れませんが、状況によってありだと思っています。 パワポのメリット パワポは、ビジネスユーザーならほぼ誰でも使える システムを作る時に、お客さん側も含めた関わるメンバー全員がITに詳しいとは限りません。しかしそういう人にもシステムに対する理解は最低限していただく必要があります。システム構成図とか特に興味がない人に説明するときに「新しいツールをいれてください」というのはハードルが高いです。 パワポ
Diagram as Code
Diagram as Code6 different ways to turn code into beautiful architecture diagrams
グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO
データアナリティクス事業本部 サービスソリューション部 サービス開発チームのしんやです。 Notionの直近リリースノートに「Mermaidっていうマークダウン構文がNotionで使えるようになったよ！」という情報が載っていたので、試してみた内容を軽くではありますが紹介したいと思います。 目次 Mermaidとは 実践 #1. フローチャート #2. シーケンス図 #3. クラス図 #4. 状態遷移図 #5. ER図 #6. ジャーニーマップ #7. ガントチャート #8. パイチャート #9. 要件図 まとめ Mermaidとは Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。 コードから良い感じのグラフを生成できるイメージについては下記動画を参照頂くと良さそうです。 実践 では早速実践してみたいと思いま
はじめに GitHub で Mermaid がサポートされました。 Mermaid は図やグラフを描画するの独自の記法を持ちます。 その記法を Markdown のコードブロック中に記述するだけで図を描画できるのが便利です。 ...便利なのですが、記法が独特なことや機能が豊富なことから、とっつきにくいところもあります。 弊社[1]では みんチャレ 開発の情報共有ツールとして esa.io を活用しており、 esa も Mermaid をサポートしており以前から活用していました。 この記事では、私がこれまでに活用してきた中から特に便利だと感じた機能を紹介します。 ちなみに Zenn も Mermaid をサポートしているため図を描画できます。 Gantt ガントチャートです。 私が Mermaid を使いたいと思ったきっかけの機能です。 まずは、一番シンプルな例を書きます。 gantt Co
よくあるAWSサーバーレス構成のシーケンス図をMarkdown（Mermaid）で描いてみた | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今までシステムのドキュメントなどでUML図を使用したい場合は、別途PlantUMLで書いて画像ファイルを生成し、MarkdownやAsciiDoc内に配置するということをしていました。 しかしこちらの記事の通り、Mermaidを使用すればMarkdown内で直接UML図の定義をコードで記述し、さらにGitHub上ではそのまま描画までしてくれるとのことです。知らなかった…！ GitHubでmermaid記法が使えるようになったのでアーキテクチャーの図を書いてみた | DevelopersIO そこで今回は、下記のようなよくあるAWSサーバーレス構成（API Gateway + Lambda + DynamoDB + α）のシーケンス図をMermaidで描いてみました。 描いてみた Mermaidにおけるシーケンス図の文法はこちらを参考にしま
EngineeringOpen SourceInclude diagrams in your Markdown files with MermaidA picture tells a thousand words. Now you can quickly create and edit diagrams in markdown using words with Mermaid support in your Markdown files. A picture tells a thousand words, but up until now the only way to include pictures and diagrams in your Markdown files on GitHub has been to embed an image. We added support for
はじめに テキストからダイアグラムの図が生成できるMermaidでAWS構成図をつくる方法を紹介します。 また、MermaidはGithubやQiitaなどのWebサービスやVSCodeやIntelliJなどのツール、コマンドやWebシステムでも使用できますので、良ければ下記の記事もご確認ください。 Mermaidのことはなんとなくわかったけど、AWSの構成図や配置図が描けないか考えていた人にも参考になれば幸いです。 AWSの構成図をつくる ・どんな感じの図ができるのか AWSの構成図を描くときにはAWS公式から提供されている[AWS Architecture Icons]というAWSのダイアグラムを書く際のアイコンセットを利用する機会が多いと思いますが、Mermaidでは残念ながらまだ使用できません。 そこで、アイコンの使用は諦めてAWSに関するグループやサービスについて、それっぽく見え
MermaidDiagramming and charting tool JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
はじめに 細かいところに PlantUML ほど融通が利かないと言われる mermaid.js ですが、逆に言えばそこまで複雑なフローでなければそこそこ描けるやんけ！ということで mermaid.js で中規模以上のフロー図を描くときに使えそうな記法などについて書いてきます。 題材 良い感じの題材が思いつかなかったので、今回は地上の星の歌詞のフロー図を mermaid.js で描いていきます。 参考↓ 準備 まずは mermaid.js でフロー図を描く際の基本です。 記載規模やお好みでどうぞ VSCode みんな大好き VSCode。拡張機能を入れることで、描きながらプレビューできたり画像出力ができます。Markdown を普段から VSCode で描いている方は下記の1を。そうでない方は2を使うと良いかと思います。 1 https://marketplace.visualstudio.
データベースドキュメント生成コマンド tbls 更新情報（Mermaid対応 / schema.json / tbls outの強化） - Copy/Cut/Paste/Hatena
久しぶりのtblsの新機能紹介エントリです。 ドキュメントのER図出力にMermaidを指定できるようになりました ER図の出力フォーマットにMermaidを指定できるようになりました。次のように er.format: セクションか --er-format オプションに mermaid を指定することで変更できます。 er: format: mermaid 開発裏話 GitHubがMermaid対応したことで「tblsもMermaid対応してほしい」という要望や提案は以前より多く受け取っていました。 しかし、個人的にあまりメリットを見出せずそのままPull Request待ちとなっていたのですが、今回エイッと作ってみました。 Mermaid対応をするにあたって1つとても面倒な仕様がありました。それはMermaidはER図の多重度（カーディナリティ）の指定が必須となっていることでした。 もと
いつもはてなブログをご利用いただきありがとうございます。 さて、はてなブログには、 はてなブログは、Mermaid記法に対応する予定はないでしょうか？ というご質問をいただくことがあります。はてなブログはJavaScriptやCSSなどをご自身で記載し、自由にカスタムできるプラットフォームです。Mermaidの対応も、少し設定を加えることでご自身のブログに導入することが可能です。 本記事では、はてなブログへの導入方法を紹介させていただきます。 Mermaidとは Mermaidとは、テキストでダイアグラムやチャートを記述する仕様のことです。また、その記述方法がMermaid記法と呼ばれています。 例えば、以下の記述が、 graph LR; 書く-- 読みたくなる -->読む; 読む-- 書きたくなる -->書く; 読む-- 共感する -->はてなスター; はてなスター-- モチベート --
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
(PR) 本記事でご紹介している Slidev などのテクニックについて、2021/11/20(土) 開催の VS Code Conference Japan 2021 にてご紹介しました。YouTubeアーカイブや発表資料も是非ご参照ください。 Slidevとは Slidevはエンジニア向けプレゼンテーションツールです。 Markdownで記述した文書から美しいスライドを生成できます。 公式デモ とそのソースとなるMarkdown もご参照ください。 ドキュメントは以下にあります。 すぐに使えるサンプル 使用頻度の高いと思われる記法を含めたサンプルのMarkdownを以下に公開しています。 コピペするなどしてお使いください。詳細は後述します。 上記Markdownを使用しているスライドを以下にデプロイしています。 上記Markdownの記述内容と見比べていただけると分かりやすいかと思いま
Zenn や GitHub の Markdown から利用できる Mermaid には「Git ブランチを表現する」機能があります。 その機能を利用してみたところよい感じだったので、記述方法やカスタマイズについてなどを記事にしてみます。 Git ブランチを表現するとは？ ドキュメントでブランチの説明などを読んでいると下記のような図(グラフ)を見かけるかと思います。 図 1-1 AA によるブランチのグラフ A---B---C---D develop \ E---F---G topicA \ H---I---J topicB Mermaid の Gitgraph Diagrams を利用することにより、このような感じで表示できるようになります。 図 1-2 Mermaid によるブランチのグラフ 基本的な使い方 Mermaid 用コードブロックの先頭で gitGraph を記述し、Git の
概要 サービスのメンテナンスの作業手順書にmermaidのガントチャートを使ったという話 作業手順書作成時の時間見積と、実際の作業実施時の時間計測の差が簡単に把握できて便利 下のような図を出せて便利ということ ※2023/08/22 mermaidの記法が変更になったらしく、ガントの分指定が min ではなく m となった 実際のメンテナンス作業の時間を把握したい これらをなんとなく把握したい。 決めた手順が実際にどれくらい余裕があったのか把握したい 事前にステージング環境で同じメンテナンス作業をして問題ないか確認、本番メンテナンスの予定にフィードバックしたい etc. どうやって把握するか 作業前の時間見積 作業手順書に必要時間を記録する etc. 作業実施時の時間計測方法 作業ログを別途作成し、タイムスタンプを記録する 自分は作業チームでMeetに入って作業開始と終了をコメントして、
Mermaid, topoJSON, geoJSON, and ASCII STL Diagrams Are Now Supported in Markdown and as Files
For more information about using diagrams on GitHub, see Creating diagrams in the GitHub documentation For more information about non-code filetypes on GitHub, see Working with non-code files geoJSON ### Here's a geoJSON map in markdown ```geojson { "type": "Polygon", "coordinates": [ [ [-90,30], [-90,35], [-90,35], [-85,35], [-85,30] ] ] } ``` topoJSON ### Here's a topoJSON map in markdown ```top
はじめに はじめまして、ネクストモード株式会社のマーケティング事業部でセールス担当してます。いずみです。今回が初投稿、よろしくお願いします。 この度、ネクストモードがNotion販売代理店となったことを記念して、私も最近Notionで取り組んでみたことをご紹介してみたいと思います！ 非エンジニアの方でも活用しやすい内容になってますので、DevelopersIOご愛読のエンジニアの皆様から、是非、一緒にNotionを使っている営業・経理・総務のご担当にもシェアして頂けたら嬉しいです！ Notionを使い続けると出てくる悩み。 ネクストモードでは、早い時期からNotionを取り入れ社内のナレッジ共有を行ってきているのですが、長く使っているとNotionの自由度の高さゆえの悩みが出てきます。 いつでも誰でも、ページを作成してナレッジ共有ができてしまうが故に、「あのページどこに行ったっけ？」とか、
GitHub で Markdown の中に Mermaid を埋め込んだら表示してくれる機能がバレンタイン デーにリリースされました。 今まで Mermaid は知らなくて、テキストでアクティビティ図やクラス図みたいなものを書く必要があるときは PlantUML を使ってましたが GitHub が対応したということで Mermaid に入門してみようと思います。 因みに、この記事を書き始めた時点では、まだ何もやっていないので Mermaid については名前と図が書けるらしいということしか知りません。 では、やってみようと思います。 試すための環境 Visual Studio Code の Markdown Preview Mermaid Support を入れることで Markdown のプレビュー機能が Mermaid のプレビューに対応します。 導入前はこんな感じですが 拡張機能を入れ
OpenAPI + Redoc, Docusaurus, Mermaidで始めるスキーマ・ドキュメント駆動開発
OpenAPI + Redoc, Docusaurus, Mermaidで始めるスキーマ・ドキュメント駆動開発 【この本について】 この本はOpenAPIを使ってドキュメントを作成する方法を学びます。 OpenAPIを使ってドキュメントを作成することで継続的な開発を行うことができ、 OpenAPI Generatorを使ってドキュメントと実装のズレをなくすことができます。 また、Docusaurusを使ってドキュメントを作成することで、 運用ドキュメントを簡単に公開することができます。 本書では以下の内容を取り扱っています。 - Docusarusでドキュメント環境を構築する - OpenAPI + Redocでドキュメントを作成する - OpenAPI Generatorで自動生成する - Prismでモックサーバーを導入する OpenAPIを使ってみたい人、社内の設計・運用ドキュメント
GitHub、Markdownファイルに「Mermaid」で図を挿入可能に：Markdownで素早く図を作成、編集できる GitHubは、MarkdownファイルでJavaScriptベースの作図ツール「Mermaid」を使って、インラインで図を作成できるようにした。
こんにちはnasaちゃんです。 今日は最近GitHubのTracked Issueの関係を可視化するツールを作ったので紹介をしようと思います。このツールは今の所技術的に面白いことはしていないので技術話は省略します。 何が出来るか 次の３つが主な機能です。 TrackedIssueの関係図がissue上にコメントされます open, closeやサブイシューの追加などの変更があった際に図が自動で更新されます クリックすることでそのissueに遷移します プロジェクトの進行状況や全体像がいつでも把握できていいね！！というツールになっています。 ではTrackedIssueとは何でしょうか？GitHubの新し目の機能なので馴染みのない人もいるかと思います。 GitHubには、issueのbodyにチェックリストとして追加しているissueのopen, closeによってチェックリストの状態が変わ
OpenAI APIを利用してTerraformから構成図っぽいMermaidを出力してくれるコマンドを作った話
前段 ※社内ブログの内容を個人発信する許可をいただいたためzennでも公開しています。 ChatGPTで話題のOpenAIのモデルは、現在画像の取り扱いはまだ発展途上です。文章から画像を作るAPIや画像入力が検討されていますが、システム運用にクリティカルに使えそうになるのはもう少し待つ必要がありそうです。 そこで現状魅力的に映るのがMermaidです[1]。 Mermaid（マーメイド）は、テキストベースの記述によってフローチャート、シーケンス図、ガントチャートなどの図を生成するためのツールです。Mermaidは、Markdownやプレーンテキストなどのテキスト形式で図を記述し、それを自動的にグラフィカルな図に変換します。(by Chat-GPT) 画像化はJavascriptで実装されており、現在はgithubのmarkdownプレビューやNotionの専用ブロックなどで利用可能です。
Mermaid記法で『「あたし状態遷移図」、あるいは「あたし約5.2MB」』を再現する - 日直地獄
技術者向けTips: はてなブログでMermaid記法を利用する方法 - はてなブログ開発ブログ はてなブログ開発ブログでMermaid記法導入の紹介があった。遷移図を見るとどうしたって連想してしまうのが、id:debedebe 氏の名作「あたしオートマトン」及び『「あたし状態遷移図」、あるいは「あたし約5.2MB」』。 残念ながらはてなグループはサービス終了とともに閲覧できなくなっているもののWebArchiveでは見られる。 web.archive.org せっかくMermaidで簡単に状態遷移図が書けるようになったのだからプロローグだけでも再現してみたいと思う。 graph TD; アタシ-->アキ; アキ-->歳?; 歳?-->23; 23-->まぁ今年で24; まぁ今年で24-->彼氏?; 彼氏?-->まぁ; まぁ-->当たり前に; 当たり前に-->いる; いる-->てか; てか
Argdown
Simple Writing pros & cons in Argdown is as simple as writing a Twitter message. You don't have to learn anything new, except a few simple rules that will feel very natural. Expressive With these simple rules you will be able to define more complex relations between arguments or dive into the details of their logical premise-conclusion structures. Powerful Argdown can even be used within Markdown!
Mermaid diagrams can be displayed within Markdown · Issue #372 · github/roadmap
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
MermaidDiagramming and charting tool JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
筆者の勤務先ではScrapboxというWiki的なツールが導入されていて、何でもそこに書いている。 そして筆者は以前からPlantUMLなどで作図するのが気に入っているが、最近は同様の目的を持ったMermaidがよく使われている様子がある。2021年12月にはNotionが、そして2022年2月にGitHubがそれぞれMermaidの機能を発表している。 🎁 Create CHARTS & DIAGRAMS with Mermaid, right inside a code block! pic.twitter.com/uFobTpFvmI— Notion (@NotionHQ) 2021年12月28日 You can now embed diagrams directly into your Markdown files, Issues and PR comments using Me
Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript.
昨年末、Notionでmermaidを利用した図が描けるようになりました。 それから今年はGitHub。 ただなんとなく、 「mermaidって難しいんでしょう？」 「図を描くなんてどうやるねん」 そんな固定観念がありました。 しかし弊社は絶賛新サービスの開発中！ これからDB設計していくぞ！ なフェーズだったので使ってみたらとんでもなく簡単に使えてびっくりしました。 書き方 テーブルを作る 驚きの簡単さ。
ChatGPT をはじめ近頃 AI の進化が著しく、SNS などで紹介されている使用例に驚かされる毎日です。 Notion はここ数年で多数の企業が利用するようになっている多機能のドキュメントツールです。近頃 Notion AI という機能がリリースされました。 またシーケンス図を書くのによく使われているのが Mermaid です。 今回は Notion AI に Mermaid でシーケンス図を書いてもらったらどうなったのか、また Mermaid でシーケンス図を書くときにはどのような書き方があるのかをご紹介します！
ChatGPTでMermaid構文を出力してみた（シーケンス図、ガントチャート、フローチャート作成の実践例） | DevelopersIO
こんにちは、CX事業本部 Delivery部の若槻です。 Mermaidを利用すると、様々なタイプの図（Diagram）を簡単に作成でき、またコードやテキストで管理することができます。 このMermaid構文の作成をChatGPTでさらに簡単に行えないか？と考え、ChatGPT（GPT-4）に作成したい図の要件を伝えることでMermaid構文を出力してもらい、各種図（シーケンス、ガントチャート、フローチャート）の作成を試してみました。 試してみた AWSサーバーレス構成で実装したREST APIのシーケンス図の作成を依頼してみます。 入力 次の処理を図解するシーケンス図をMermaid構文で書いて下さい。 1. クライアントはAPI Gateway REST APIにGETリクエストを送信する。 2. API Gateway REST APIはリクエストに含まれるAuthorization
GitHubのMarkdownファイルでMermaid記法がサポートされたので作図まとめてみました。 - Qiita
Mermaid1はコードで作図することができるツールです。 いままではmermaid.jsが必要でしたが、今回GitHubのMarkdownファイルで、Mermaid記法がサポートされました。 それに伴い、Mermaidで表現できる図についてまとめてみました。 なお簡単にMermaidを試す方法として、Live Editor2もあります。 可能な作図一覧 フローチャート（Flowchart） graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] sequenceDiagram Alice->>+John: Hello John, how are you?
GitHubでmermaid記法が使えるようになったのでアーキテクチャーの図を書いてみた | DevelopersIO
Include diagrams in your Markdown files with Mermaidのブログにもある通り、GitHubでmermaid記法を用いてMarkdownで図を書けるようになったので試してみました。 はじめに 今回はアーキテクチャの中身の話については触れていません。 よく見かけるアーキテクチャーの図をmermaid記法を用いて記述してみて、その結果を記したものになります 書いてみるもの 図といえば、アーキテクチャーの図をよく見かけるなと思い、mermaid記法で書いてみるとどうなるか試してみました。 今回は、iOSプロジェクトで馴染みのありそうなこちらの４点をピックアップしてみました。 Cocoa MVC MVP MVVM VIPEP 図にも色々な種類がありますが、今回はFlowcharts - Basic Syntaxを用いて表現してみました。詳しい説明はこち
Mermaidはテキストでグラフやチャートを描ける記法で、フローチャートやシステム開発で使われるシーケンス図、ガントチャートなどを表示できます。 テキストであれば検索が容易で、かつ修正も手軽に行えます。今回はそんなMermaidで利用できる図や書き方を紹介します。
こんにちは、CX事業本部 Delivery部の若槻です。 今回は、GitHubでMermaid構文の表示機能が強化されていたので共有します。 Mermaidとは Mermaidとは、Markdown構文の拡張ツールで、様々なタイプの図（Diagram）をコードやテキストで記述し、視覚的に表示することができます。 Mermaid構文を利用することにより、次のような図をMarkdownで記述することができます。 Flowchart Sequence Diagram Gantt Chart Class Diagram State Diagram Pie Chart Git Graph 公式サイトより引用 GitHubでのMermaid構文の表示機能が強化されていた GitHubではMermaid構文をサポートしており、MarkdownファイルにMermaid構文を記述することで、図を表示すること
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜスタバのセイレーンは股を広げているのか - 本しゃぶり
結局UMLとかシーケンス図とかAWSの図とかどれで描くと良いのよ？と思ったときの選択肢 - Qiita
ChatGPTで業務フローが自動的に書けた｜Yuji Inagaki
GitHubで使えるようになった Mermaid の便利なところ
Include diagrams in your Markdown files with Mermaid
テキストから図が生成できるMermaidでAWS構成図をつくる - Qiita
Mermaid | Diagramming and charting tool
【地上の】mermaid でちょっと大きめの図を描く【星】
技術者向けTips: はてなブログでMermaid記法を利用する方法 - はてなブログ開発ブログ
Slidevを導入してMarkdownで美しいスライドを書こう - Qiita
Git ブランチの表現も Mermaid がよい感じに表示してくれました
作業手順書にmermaidを使ったら便利だったメモ - Qiita
NotionのMermaid使って業務整理してみた。 | DevelopersIO
Mermaid 入門してみたメモ(flowchart で力尽きた…)
GitHub、Markdownファイルに「Mermaid」で図を挿入可能に
GitHubのTrackedIssueの関係を可視化するツールを作った
Mermaid | Diagramming and charting tool
ScrapboxでMermaidを使う - cockscomblog?
Online FlowChart & Diagrams Editor - Mermaid Live Editor
MermaidでER図のスケッチをしたら簡単すぎて衝撃だった
Mermaid でシーケンス図を書く方法を解説！Notion AI にシーケンス図を書いてもらったら…!?
Mermaid記法の書き方（Markdownテキストでチャート・グラフが描ける）
GitHubでMermaid構文の表示機能が強化されていました | DevelopersIO
approach.yahoo.co.jp
www.news-postseven.com
www.iezo.net
note.com/tiyu
2-9-9.com
gamingindustry.hatenablog.com