マーメイド記法(Mermaid記法)について
ダイアグラムやフローチャート図を作成できるマーメイド記法を使用する方法について記述します。
※Github、notion、VScodeで利用できるものと同じです。
※マーメイドについては以下URLをご参照ください。
https://mermaid-js.github.io/mermaid/#/
マーメイド記法(Mermaid記法)の設定方法(書き方)について
編集画面の表示と編集方法について
まず、エディターのボタンの中から
をクリックしてください。すると、以下のような編集ダイアログが表示されます。
- テキストボックスにマーメイド記法を記述する
- OKボタンを押すと編集画面にチャート図を挿入されます
再編集について
チャート図の上で右クリックして編集ボタンを押すと、編集ダイアログが表示されます。
※チャート図の上にカーソルを持っていき、 をクリックしても編集ダイアログが表示されます。
サンプル
フローチャートのマーメイド記法(Mermaid記法)の書き方
※フローチャートの文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/flowchart
シーケンス図のマーメイド記法(Mermaid記法)の書き方
※シーケンス図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/sequenceDiagram
クラス図のマーメイド記法(Mermaid記法)の書き方
※クラス図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/classDiagram
状態遷移図のマーメイド記法(Mermaid記法)の書き方
※状態遷移図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/stateDiagram
ER図のマーメイド記法(Mermaid記法)の書き方
※ER図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram
ジャーニーマップのマーメイド記法(Mermaid記法)の書き方
※ジャーニーマップの文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/user-journey
ガントチャートのマーメイド記法(Mermaid記法)の書き方
※ガントチャートの文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/gantt
円グラフのマーメイド記法(Mermaid記法)の書き方
※円グラフの文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/pie
要求図のマーメイド記法(Mermaid記法)の書き方
※要求図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/requirementDiagram
Gitコミット図のマーメイド記法(Mermaid記法)の書き方
※Gitコミット図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/gitgraph
可能ならばツールチップの導入をお願いしたいです
編集時に、何も変更しなくても不正な文字列を含んでいると検出されてしまいます。何度かリロードすると普通に投稿できる場合があります。同じ現象の方いらっしゃいますでしょうか。Twitterの貼り付けあたりが怪しい気もします。
https://twitter.com/wiki_three を拝見すると、システム拡張が難しいようですので、オープンソース化していただけますと幸いです。
gitであればブランチを切ってから開発し、pull requestを上げさせていただきますので。
ご検討よろしくお願いいたします。
更新履歴についての要望です。
説明文(metaのdescription)やタグを更新しただけでも更新履歴に上がってしまうので、これらの更新を躊躇してしまいます。
ユーザにとっては何が更新されたのかと困惑するだけになってしまいますので、
本文の更新日時だけを対象にできませんでしょうか。
おそらくDBテーブルに「本文更新日時」の追加が必要になると思いますが。
次善策として、new()系で更新履歴に新着と分かる表示がされるようになれば幸いです。
ホームページ的な運用をする際に画像以外もアップロードすることがあるのですが、画像以外もアップロードできるようにしてくださることはできないでしょうか…
ご検討していただけると幸いです。