マーメイド記法とは
https://qiita.com/hirokiwa/items/7a9ae5fb87958783bd82
ダイアログやガントチャートなど。いろんな図式をコードで表現する表記方法です。
この表記、直接1から書くことはありません。ですが、AIを利用するにつれ、目にすることが増えてきました。
実際に文字では表現できない分かり易さがあります。「これをa-blog cmsでも表現できるのでは?」と思い、カスタマイズを行いました。
実際のマーメイド表記
graph TD;
A[GTDリファクタリング] -->|毎日のタスク整理| B(タスクの分類: 実行 / 保留 / 削除)
B -->|実行| C
C -->|YES| D[即実行]
C -->|NO| E[スケジュールに組み込む]
B -->|保留| F[翌週のタスク候補に加える]
B -->|削除| G[不要なものをGTDから排除]
実際に変換したもの
カスタマイズした箇所
- a-blog cmsのコンフィグ
- tag-select.html
- js
- css
をそれぞれカスタマイズしました。
テキストタグセレクトに「mermaid」を追加
- タグ「mermaid」
- ラベル「マーメイド記法」
と追加しました。

利用しているテンプレートのinclude/unit/tag-select.html
divを追加し、変換するキーとなるclassを設定しました。
<!-- BEGIN mermaid -->
<div class="mermaid"></div><!-- END mermaid -->
読み込みjsに以下を追加
<script type="module">
import mermaid from '<https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs>';
mermaid.initialize();
</script>
読み込みCSSに以下を追加
/* Mermaidで生成されたSVGを中央揃えにする */ .mermaid svg
CSSがなくても、ダイアログは表示されますが、図表が中央にある方が見栄えがよいため、そのようにしました。
ChatGPTが便利
上記の実装方法については、ChatGPTと相談しながら、行いました。
これくらいであれば、4oで問題なく相談できるかと思います。
お困りごとをお聞かせください。
a-blog cmsについてのご相談、ご依頼など。
頂いた内容については、3営業日以内の返信を心がけております。
他社作成のa-blog cms修正、コーディング済htmlへのa-blog cms導入もOK。
小さなことから、お気になさらずお気軽にご相談ください。
その他のa-blog cms一覧
-
FileMaker
会員特典あり
作業現場から考える「仕組み資産化」とは
近年、便利なクラウドツールやアプリが次々と登場し、現場の業務効率化に貢献しています。 しかし、「とりあえず使っている」「決められた通り動いている」だけでは、現場の知恵や工夫が仕組みに反映されず、ツー...
続きを読む
-
FileMaker
会員特典あり
ツール導入ではなく「仕組みの資産化」を目指す、システム導入を
最近、CMやネット広告で目にすることが多くなったサブスクリプション型の業務システム。確かに、初期コストを抑え、すぐに使い始められるという大きなメリットがあります。 ですが、その便利さの裏に、見落とされ...
続きを読む
-
FileMaker
FileMaker の自習室にて「Web ビューアを使って、テキストを喋らせる(2)(Claris FileMaker - 10分でスキルアップ)」が公開されました
動画内のサンプルがダウンロードできます。 ダウンロードはこちらから この動画のこぼれ話前回の動画のパート2。日本語以外を喋らせるバージョンです。前回もお話しした通り「英語版がそもそものスタート」でした...
続きを読む
-
Make
Makeのgoogleアカウントでの権限が少なくなっている模様
以前、新規接続した時の権限全部で10種類程度あった。Google Photoの権限についても「アルバム全体への権限」が付与されていた今回、新規接続で確認した権限Google Photoのアルバム接続でエラーが出ていたため、...
続きを読む
-
FileMaker
FileMaker の自習室にて「Web ビューアを使って、テキストを喋らせる(1)(Claris FileMaker - 10分でスキルアップ)」が公開されました
動画内のサンプルがダウンロードできます。 ダウンロードはこちらから この動画のこぼれ話趣味で英語学習をしているのですが、そのためのソリューションを趣味でこつこつと作り始めて。知らない単語の「あれ?こ...
続きを読む
-
FileMaker
FileMakerServerにファイルをアップできない、特定のFileMakerクライアントがある
問題:特定のマシンから、FileMakerServerにファイルをアップできないFileMakerファイルを、FileMakerクライアント経由でアップロードしたいのに、FileMakerServerに接続できないユーザID、パスワード入力画面が...
続きを読む