MENU

【2023年6月】WP Mermaidでシーケンス図とフローチャートの作り方【Swell環境】

あわせて読みたい
【2023年5月】WordPressサイトで数式を超便利に使う方法/プラグインSimple Mathjax わりと手軽に導入できます。プラグインを検索しインストールして有効化しただけです。😆🙋‍♀️ 【基本的な使い方】 通常の文章を書くエディタで $$ x-2y \tag{1} $$ と入...

基本的な使い方

WP Mermaidを新規プラグインとしてインストールし有効化します。

テキスト一覧からGutenberg ブロックとしてWP Mermaidを選択して入力します。

チャート図

参考サイト:https://haya-nori.com/creating-flowcharts-in-wordpress-using-wp-mermaid-with-the-classic-editor/

基本的にソースコードはお借りしております。

flowchart TD; id1([給与所得者])--年調未済--->id2([還付の可能性アリ]); id1([給与所得者])--年調済--->id3{雑損控除の適用}; id3{雑損控除の適用}--Yes--->id2([還付の可能性アリ]); id3{雑損控除の適用}--No--->id4{医療費控除の適用}; id4{医療費控除の適用}--Yes--->id2([還付の可能性アリ]); id4{医療費控除の適用}--No--->id5{住宅ローン初年度}; id5{住宅ローン初年度}--Yes--->id2([還付の可能性アリ]); id5{住宅ローン初年度}--No--->id6{2ヶ所以上からの給与}; id6{2ヶ所以上からの給与}--Yes--->id7([申告必要]); id6{2ヶ所以上からの給与}--No--->id8{給与所得以外の所得が20万円超}; id8{給与所得以外の所得が20万円超}--Yes--->id7([申告必要]); id8{給与所得以外の所得が20万円超}--No--->id9([申告不要]);

シーケンス図

しかしながら、WP Mermaidだけだと数式表示やシンタックスハイライトには対応しないので注意が必要です。

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end
目次

数式を混ぜた応用例

せっかくなので他のプラグインで数式を使えるようにしていたのでそれと組み合わせる方法を試したいと思います。

もしも使えないならば画像を挿入することで代替わりできるかも気になるところです。

結論から言うとWP MermaidはSimple Mathjaxとは併用できないようです。同じページの中で2つを使うことができてもチャートの中に数式は無理なようです。またWP Githuber MDというプラグインが可能でマークダウンでの記述も可能になりましたが、今度はワードプレスのSwellテーマと相性が悪くなりました。(そもそもJavascript関係のカスタマイズそのものが出来ない仕様になっています。)

flowchart TD; id1([\phi])--\phi--->id2([\pi]);

ただしWP Githuber MDの開発者が相性がいい無料テーマを配布しているので数式含む論文資料を作ることに特化しても良いならば以下からダウンロードさせてもらって使ってみるのも良いかもしれません。

URL: https://wordpress.org/themes/mynote/

当サイトはswellテーマで作られています。もしも興味持ってくださったら以下のリンクからどうぞ。一度購入すればバージョンアップもできます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
Subscribe
Notify of
guest

CAPTCHA


0 Comments
Inline Feedbacks
View all comments
目次