WordPressでフローチャートを作る時に便利なWP mermaidの機能を紹介します！

この記事はこんな人におすすめ！

WordPressブログでWP Mermaidを使ってフローチャートを作ってみたけど、なんかもっと色々カスタマイズしていきたい！どんなカスタマイズが可能なのか、誰か教えてくれないかな？

そんな人におすすめの記事です。

WP Mermaidで使いこなせると便利なサブグラフやリンク機能、アイコンフォントの利用方法などを紹介していきます！

本記事のフローチャート

はじめに

ほとんどの人はWordPressブログにWP Mermaidを導入済みという人だと思うのですが、未導入の人や、まずは基本的な内容から知りたい！、という人は下の記事を参考にしてみて下さい！

WordPressブログで手軽にフローチャートを作成する方法！（WP Mermaidの導入） - かえる主任ブログ (kaeru-chief.com)

WP Mermaidでフローチャートを作る時に押さえておきたい基本知識・スキルを紹介します！ - かえる主任ブログ (kaeru-chief.com)

この段落については、上の記事を読んでくれた人は飛ばして大丈夫です！

上の記事を読んで物足りない人は、これからWP Mermaidの便利な機能を紹介するので、是非読んでみて下さい♪

便利なWP Mermaidのスキル6選（筆者の勝手なチョイス応用編）

私が勝手にチョイスしたWP Mermaidの便利スキル6つを紹介します！

1. サブグラフの使い方
2. リンク機能の使い方
3. アイコンフォント（Font awesomeとの連携）の使い方
4. ノードの背景、枠線、テキストの色変更
5. HTML用特殊文字の使い方
6. ソースコードへのコメント記入について

※本記事の内容は本家：mermaidで解説されている以下の内容を、私で再構成して紹介しています。

フローチャート (mermaid-js.github.io)

（※本家で紹介している内容で十分という人はもちろんいると思います。元が英文なので自動翻訳だと読みずらいかもしれない、初心者向けに表現を変えたい、という観点から本記事作成しました。）

サブグラフの使い方

サブグラフを使いたい時は、以下のような構文をフローチャートのソースコード内に記入します。

subgraph title
    graph definition
end

複数のサブグラフが使用可能

サブグラフは一つのフローチャートで2つ以上使うことも可能です。以下にソースコートを例示します。

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

サブグラフごとのフローチャート方向の変え方について

本家ホームページではサブグラフごとにフローチャートの方向を変えることも可能と紹介されているのですが、WordPress上でのWP Mermaidプラグインでは使用できないようです（2022年11月現在 Ver.1.0.1の場合）。推測ですが、プラグインではなくて直接ソースコードを編集する類の措置が必要になる模様です。

そのため、サブグラフの方向はWP Mermaidで自動調整された方向に決定されてしまいます。

参考のため、以下に本家ホームページで紹介されていたサブグラフごとに方向が異なるフローチャートのソースコートを例示します。

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

「subgraph **」の次の行に「direction **」と記載されてるのが、本来サブグラフの方向を指定するためのコードです。ですが、今のところ使用はできません（2022年11月現在 Ver.1.0.1の場合）。

構文エラーになる原因は、申し訳ないことによくわかりません(*´Д｀)

そこで、単純に方向を指定する「direction **」の構文をサブグラフ内で除外してみました。

flowchart LR
  subgraph TOP
    subgraph B1
        i1 -->f1
    end
    subgraph B2
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

そうすると、構文エラーは回避できて、無事にフローチャートが作成できました！

サブグラフの方向を個別に指定することは無理でしたが、「direction **」の構文使用しなければ、とりあえず構文エラーは回避できるみたいです！

リンク機能の使い方

前項で例示したフローチャートは最も基本的なもので、以下のような構文で構成にされています。

flowchart LR
    A-->B
    click A "https://kaeru-chief.com/"

1. 通常のフローチャートを作成するコードを入力する
2. 「click *」でどこを押したらリンクに飛ぶか指定する
3. 「click *」の後に「"　"」でリンク先のアドレスを入力する

上記コードでフローチャートを作成したものを以下に示します。

試しに「A」の部分をクリックしてみて下さい！（新しいタブでホームページが表示されます。）

アイコンフォント（Font awesomeとの連携）

WP MermaidではFont awesomeのアイコンフォントを使用することができます♪

※Font awesomeはWordPressでツイッターアイコンのような記号が文字として使用可能になるプラグインです。もしまだ導入していない人がいたら、これを機会にぜひ導入してみて下さい！

アイコンフォントを使用する際は以下の構文を使用してください。

• fa:アイコンクラス名

構文例を以下に示します。

flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?)

この構文からは以下のようなフローチャートが作成できます。

下書きの時はアイコンフォントが表示されない場合がありますがご心配なく！

そんなときはWordPress記事編集画面右上にある「プレビュー」→「新しいタブでプレビュー」をクリックすると、記事投稿時のフローチャートが確認できます。

※アイコンクラス名が合っていればフォントアイコンがきれいに表示されますが、表示されない場合はアイコンクラス名を修正しましょう。

ノードの背景、枠線、テキストの色変更

ノードの背景と枠線、テキストの色はそれぞれ以下の構文のように指定可能です。

flowchart LR
    id1(スタート)-->id2(ゴール)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5 5,color:#fff

ノード枠内の背景色と枠線、それぞれで分けて紹介していきますね！

ノード背景色の指定方法

ノードの背景色は以下ソースコードのように指定できます。

flowchart LR
    id1(スタート)-->id2(ゴール)
    style id1 fill:#f9f
    style id2 fill:#bbf

「style」記入後にノード番号（ここではid1かid2）を指示し、ノード枠内の背景色を指示する「fill」記入後にカラーコードを指定します。上記のソースコードでは「#f9f」、「#bbf」がカラーコードに該当します。

CSSで使用するWebセーフカラー216のコードに対応しているようです。

カラーコード対応表については以下のサイトでまとめてくれているようなので参考にしてみて下さい！

CSSで使える短縮カラーコードとWebセーフカラー216一覧表 | UX MILK

ノード枠線色、線種の指定方法

ノードの枠線色、線種は以下ソースコードのように指定できます。

flowchart LR
    id1(スタート)-->id2(ゴール)
    style id1 stroke:#333,stroke-width:4px
    style id2 stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

「style」記入後にノード番号（ここではid1かid2）を指示するところまでは変わりませんが、ノード枠線の色、幅、線種でそれぞれ以下のように指定します。

• ノード枠線を指示する「stroke」記入後にカラーコードを指定する
• ノードの枠線幅を指示する「stroke-width」記入後に「＊px」のように線の幅を指定する（＊には数字が入る）
• ノード線種は特に指示がなければ実線になる。「stroke-dasharray」で点線の作成を指定し、その後「5 5」のように点線で色がつく部分と空白の部分の間隔を数字で指定します。（※指定の仕方によっては1点鎖線や2点鎖線も可能みたいなので気になる方は以下の記事を参考にしてみて下さい：【長方形SVG+CSSで遊んでみた】SVG line関連CSSプロパティ一覧 - Qiita）

ノード内テキスト色の指定方法

ノード内テキスト色は以下ソースコードのように指定できます。

flowchart LR
    id1(スタート)-->id2(ゴール)
    style id1 color:#f03
    style id2 color:#6f3

「style」記入後にノード番号（ここではid1かid2）を指示し、ノード内テキスト色を指示する「color」記入後にカラーコードを指定します。上記のソースコードでは「#f03」、「#6f3」がカラーコードに該当します。

カラーコードは背景色の時と同様に、Webセーフカラー216のコードに対応しているようです。

CSSで使える短縮カラーコードとWebセーフカラー216一覧表 | UX MILK

HTML特殊文字コードの使い方

WP MermaidではHTML特殊文字コードを使用して記号や特殊文字を使用可能です！

HTML特殊文字コードについては以下リンク先を参照ください。

HTML特殊文字コード表 (shurey.com)

ソースコードへのコメント記入

色々とカスタマイズしていくにつれてソースコードの記入量も多くなり、ぱっと見でわからなくなったりします。そんな時にはソースコードの中にコメントを残しておくと便利です！

例えば以下のような構文だと、

flowchart LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

2行目の「%%」で始まる内容は全てコメントとして扱われ、フローチャートのソースコードとしては無視されます。上記のソースコードでフローチャートを作ると以下のようになります。

コメント記入で注意する点は以下の2点です！

• 「%%」で始まる行は全てコメントとして扱われる
• ソースコードと同じ行にコメントを残すことはできない

感想

今回はサブグラフ、リンク機能、アイコンフォント、ノードの背景、枠線、テキストの色変更、HTML用特殊文字、ソースコードへのコメント記入について紹介しました！

個人的にはノードの背景、枠線、テキストの色変更は重宝しそうだと思いました。フォントアイコンもたくさんの種類があるので使えるのがうれしいですね！

サブグラフに関しては便利なのですが、もう少し使いやすくなってほしいと思います。

ただ、これだけのスキルを身に付けたら大抵のフローチャートは作れちゃうのであまり気にならないかもしれません（笑）

Mermaidは作成した資料に対して、後から修正したり、追加したりという作業を実施する前提で作られたツールなので、今回身に付けたことで今後記事をブラッシュアップしていこうと思います！

※調べていく過程で現在進行形で他にも色々な機能を実装できるように取り組まれていることが分かったので、便利な機能が見つかったらあらためて紹介します！

まとめ

• WP Mermaidでは様々なカスタマイズに応じたコマンドが用意されている
• コマンドは直観的でわかりやすい
• 最初は億劫かもしれないが、内容自体は重くないので覚えやすい
• 色んなカスタマイズや追加がしやすいので、関連スキル身に付けておくとのちのち便利

是非、ランキングへの協力をお願いします！

にほんブログ村

人気ブログランキング