Typoraを使ってMermaid記法で図を作成しようとした際に、うまくいかないという問題が発生することがあります。特に、マークダウンエディタにコードを入力した際に、意図した通りの図が描画されない場合があります。この記事では、TyporaでMermaidを使う際に起きるエラーの原因と修正方法について解説します。
Mermaid記法とは？
Mermaidは、テキストベースで図を作成するための記法です。これを使用することで、複雑な図を簡単に表現でき、特にフローチャートやシーケンス図を描くのに便利です。Typoraのようなマークダウンエディタでは、Mermaidを簡単に利用でき、ビジュアルに優れたドキュメントを作成することができます。
Mermaidコードの基本的な書き方
Mermaidのコードを書く際には、“`mermaid“`という記号で囲み、さらにその中に描きたい図のコードを記入します。例えば、フローチャートを描く際のコードは以下のように記述します。
```mermaid
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Try again]
```このように、Mermaid記法で図をテキストとして記述することができ、Typoraや他の対応するエディタでレンダリングされると、視覚的に図が表示されます。
エラーが発生する原因
質問者のコードを見てみると、いくつかのエラーがあります。主に「graph TD」の前に不必要な空白文字が入っていることが原因です。Mermaidでは、このような空白文字がエラーの原因となり、図が正しく描画されません。
さらに、“`mermaid“`のブロックが正しく閉じられていない場合も、エラーの原因になります。以下に、修正されたコードを示します。
```mermaid
graph TD
A[Adobe Acrobat Pro]
A --> B1[DTP業務向け]
B1 --> C1[プリフライトチェック]
B1 --> C2[カラープロファイル確認]
B1 --> C3[フォントの埋め込み確認]
B1 --> C4[出力プレビュー]
B1 --> C5[注釈・校正のやりとり]
A --> B2[ビジネス・教育向け]
B2 --> D1[PDF編集（テキスト・画像）]
B2 --> D2[OCRで文字認識]
B2 --> D3[電子署名・入力フォーム]
B2 --> D4[注釈・ハイライト]
B2 --> D5[PDFからOffice文書へ変換]
style B1 fill:#f8d7da,stroke:#a94442
style B2 fill:#d4edda,stroke:#155724
```このように空白を除去し、正しい構文で記述することで、Mermaidが正常に動作します。
TyporaでのMermaidの設定確認
TyporaではMermaidを利用するために、設定を確認しておく必要があります。まず、Typoraの「Preferences」＞「Markdown」＞「Mermaid」オプションが有効になっていることを確認してください。
この設定が無効になっていると、Mermaid記法がレンダリングされませんので、必ず確認しておきましょう。
まとめ
TyporaでMermaidを使う際に音がうまく表示されない問題は、コード内の空白や構文エラーが原因であることが多いです。正しい構文で記述し、Typoraでの設定を確認することで、問題は解決できます。質問者のコードを修正したように、正しい形式で記述することで、スムーズにMermaidの図を作成できるようになります。
コメント