MermaidDiagramming and charting tool JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
こんにちは、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構文を記述することで、図を表示すること
サーバやらDBのやり取りで、処理の流れを整理したい事があった。 そのため、シーケンス図の作成手段を探していたところにmermaidを発見。 軽く試してみた結果を残しておきます。 参考記事 mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す mermaidとは mermaid(Github) シーケンス図やらガントチャートやらフローチャートを、Markdown形式のテキストで書くことができる。 書式については、公式ドキュメントが分かりやすいので、そちらを参照。 Javascriptでweb上に描画する事もできるし、VSCodeのプラグインを使ってエディタ上でプレビューする方法もある。 使ってみた感じ メリット テキストで作成することで差分管理ができる。 脱Excel! テキストエディタの機能が使えるため、一括の修正も用意である。 javascriptにてweb上で動
Introduction 最近、VS codeでメモやドキュメントを残すことが増えて、Markdownで書く機会が増えました。 *2022/2/22 GithubやNotionでも、mermaid記法をサポートしてきており、注目度も上がってきてますね。 いろいろと試しているなかで、Mermaidを使ってガントチャートやシーケンス図も作れる便利さを知り、せっかくなので書き方をnoteしておきます。 VS codeをmarkdown editorとして使用するということ自体は、多くの方がやっています。 特に、VS code + Markdown Preview Enhanced の拡張機能 という構成で使用する人が多く、私もその構成で使っています。 余談ですが、もともとAtmoでかなり支持されていた拡張機能(パッケージ)のようです。 私もAtomを使うには使いますが、VS codeのほうがサク
mermaidとはmermaid(Github) mermaidはフローチャートやシーケンス図、ガントチャートなどのUMLが描けるJSライブラリです。 Markdownでドキュメント作成する際にmermaidを使用すると、ExcelやVisioなど修正が煩わしいアプリを遠ざけることができます。 大変捗りますので記法をご紹介します。 環境VScodeを使っている方は[Markdown Preview Mermaid Support]プラグインを導入すればプレビューで表示できるようになります。 筆者は気軽に書き始められるのでオンラインエディタの「HackMD」を使うことが多いです。その他、mermaid.jsを読み込めばHTMLでも描画可能です。 フローチャート記述例 graph LR; A-.->B; A-->C; B-.->D; C-->D; シーケンス図 記述例 sequenceDiag
つい先日、とあるシステムの処理の流れと一部処理のフローチャートを付けた見積り資料を書くことになり、ちょうど良い機会だったので、MarkdownでUML図表が描ける「StackEdit」を使って、オールMarkdownで資料を作成してみた。 いやぁ、打ち込んだテキストがリアルタイムに図表化されていく様は、とても新鮮で、そしてすごく面白かった。資料が出来上がった後の達成感というか、完成した図表を見た時の感動が結構はんぱない。技術系の資料作成でこんな良い体験ができたのは初めてかもしれんな…(笑) ──と、結構感動的な体験ができるMarkdownでのUML図表作成なんだが、せっかくなのでそれの書き方を含めてもう少し突っ込んだTIPSとしてまとめておこうかと思った次第。 Markdown+UML とは? とりあえず、「Markdown+UML」というのは私の造語だ。まぁ、正確に言うなら「UML di
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く