Difyをより使いやすく！小さな工夫で変わるUIの秘訣：Markdown活用術

はじめに

Difyの標準機能だけでは、複雑な情報を整理して分かりやすく提示することに課題を感じることはないでしょうか。実は、Difyのテキスト入力エリアでサポートされるMarkdown記法を適切に活用するだけで、アプリケーションのUIが改善され、ユーザーエクスペリエンスを向上させることが可能です。

本記事では、Difyアプリケーションの「伝える力」を格段に向上させるMarkdownの活用テクニックに焦点を当て、その具体的な実装方法と実用例を徹底解説します。単なる見た目の改善に留まらず、情報伝達の効率化にも貢献するMarkdownの可能性を、ぜひご自身のプロジェクトでお試しください。

Markdownとは？ Difyアプリでの活用メリット

Markdownは、プレーンテキストに特定の記号を付加するだけで、ドキュメントを構造化できる軽量マークアップ言語です。

DifyアプリケーションにMarkdownを適用することで視認性が向上し、ユーザーはより迅速かつ正確に情報を理解し、利用できるようになります。

以下の画像はMarkdownの導入前（上）と導入後（下）の出力の比較画像です。※修正箇所を赤字で示しています。
少し手を加えるだけで、視認性が向上することが分かると思います。

Markdownを実際に適用させる方法

では、具体的にDifyアプリケーションのどのインターフェースにMarkdown記法を記述することで、その効果がUIに反映されるのでしょうか。Difyでは、ほとんどのテキスト入力領域においてMarkdownが自動的に解釈・レンダリングされるため、特別な設定は不要です。

MarkdownをDifyに適用する方法は、主に以下の2つのアプローチがあります。

「テンプレートブロック」や「回答ノード」へ書き込む

以下のようにテンプレートブロックや回答ノードにMarkdown形式を書き込むだけで、Markdownを反映させることが可能です。

※回答ノードはワークフローでは利用できません。

プロンプトによってLLMにMarkdown形式の出力を促す

大規模言語モデル（LLM）へのプロンプトに、Markdown形式での出力生成を明示的に指示することも効果的な方法です。これにより、AIが生成する回答そのものに構造化されたMarkdownが適用され、最終的な出力の可読性を高めることが可能です。

Markdownの表記一覧

1. 見出し：情報の階層を明確にし、読みやすくする

• 実装方法:
  • 行の先頭にハッシュ記号（#）をつけます。
  • 通常Markdown形式ではハッシュ記号の数で、見出しの大きさが変わります（# が一番大きく、### と増えるごとに小さくなります）が、Dify上だと見た目の差異はありません。
  • ハッシュ記号の後に半角スペースを入れ、見出しのテキストを記述します。

2. 太字・斜体：重要なポイントを強調する

• 実装手順:
  • 太字: 強調したいテキストをアスタリスク2つ（**テキスト**）またはアンダースコア2つ（__テキスト__）で囲みます。
  • 斜体: 斜体にしたいテキストをアスタリスク1つ（*テキスト*）またはアンダースコア1つ（_テキスト_）で囲みます。
  • 太字と斜体: アスタリスク3つ（***テキスト***）で囲むと、太字かつ斜体になります。

3. リンク：関連情報へスムーズに誘導する

• 実装手順:
  • リンクとして表示したいテキストを角括弧（[ ]）で囲み、続けて丸括弧（( )）の中にURLを記述します。
  • 丸括弧内のURLの後に半角スペースを入れ、ツールチップテキストを記述し二重引用符（""）で囲むことで、ホバー時にツールチップを出現させることが可能です。

4. 画像の埋め込み：視覚的に分かりやすくする

• 実装手順:
  • 感嘆符（!）の後に角括弧で画像の代替テキスト（画像が表示されない場合に表示される文字）を記述し、続けて丸括弧の中に画像ファイルのURLを記述します。

5. コードブロック：プログラムや設定情報をきれいに表示する

Difyアプリからの出力で、プログラミングコードはもちろん、APIキー、特定のID、設定値など、ユーザーにコピーして使ってほしい情報があるときに、このコードブロック記法は非常に強力です。整形された情報は読みやすいだけでなく、Difyでは自動的にコピーボタンが付くため、ユーザーはワンクリックで内容をコピーでき、手作業によるミスを格段に減らせます。
また、文章中に短いコードやコマンドを記述したい場合は、インラインコードを使うと便利です。

• 実装手順:
  • コードブロック: 該当箇所を3つのバッククォートで囲み（該当箇所）、最初の3つのバッククォートの直後に使用しているプログラミング言語名（例: text,python, json, htmlなど）を記述します。プログラミング言語を記入せず`````だけで囲むことも可能ですが、その場合コピーボタンが発生しません。
  • インラインコード: 表示したいテキストをバッククォート1つ（```）で囲みます。
    

6. リスト：情報を箇条書きで分かりやすく整理する

• 実装手順:
  • 順序なしリスト: 行の先頭にアスタリスク（*）、ハイフン（-）、またはプラス（+）をつけます。
  • 順序付きリスト: 行の先頭に数字とピリオド（1., 2., 3.など）をつけます。
    • 自動連番機能: 順序付きリストでは、たとえすべての項目を「1.」と記述しても、Markdownパーサーが自動的に正しい連番（1., 2., 3.）を振ってくれます。これにより、リストの途中に項目を追加・削除しても、手動で番号を修正する必要がありません。
  • ネスト構造: 親リストの項目より半角スペース4つ（またはタブ1つ）分インデントしてリスト記号を記述します。※順序なしリストでは半角スペース２つでも可能

7. 表：構造化されたデータを比較・提示する

• 実装手順:
  • パイプ記号（|）で列を区切り、ハイフン（-）とコロン（:）で行揃えを指定します。
    • 左揃え: ハイフンの左にコロン（:---）
    • 中央揃え: ハイフンの両側にコロン（:---:）
    • 右揃え: ハイフンの右にコロン（--:）
  • ハイフン（-）より上の行でヘッダーを指定します。
    

8. 区切り線（水平線）：情報の区切りを明確にする

• 実装手順:
  • ハイフン3つ（--）またはアスタリスク3つ（**）またはアンダースコア3つ（___）を、行全体を使って記述します。これらの記号の間にスペースを入れても構いません。
    

9. 引用：他者の発言や参考情報を明示する

• 実装手順:
  • 引用したいテキストの行頭に大なり記号（>）を記述します。
  • ネスト化することも可能です。

10. 打消し線：修正されたものや不要なテキストであることを示す

• 実装手順:
  • 取り消したいテキストをチルダ2つ（~~テキスト~~）で囲みます。

11. チェックボックス：タスクや項目の進捗状況を示す

• 実装手順:
  • リストアイテムの先頭にハイフン、半角スペース、角括弧と半角スペース（- [ ]）または角括弧とx（- [x]）を記述します。

12. 注釈：特定の語句に補足情報や参照元を付け加える

• 実装手順:
  • 注釈をつけたい言葉の直後に、[^1]のように角括弧とハット（^）、そして識別用の数字や単語を書きます。
  • 文章の最後など、別の行に、同じ識別子（[^1]:）を書き、その後に注釈の内容を記述します。

13. トグル：詳細な情報をコンパクトに収納する

• 実装手順:
  • HTMLの<details>タグと<summary>タグを使用します。

まとめ：MarkdownでDifyアプリの情報を「伝える力」を向上させよう

DifyアプリのUIを改善するために、特別なデザインスキルやプログラミング知識は必要ありません。今回ご紹介したMarkdownの記法を少し加えるだけで、あなたのアプリの出力は驚くほど見やすく、ユーザーにとって魅力的なものになります。
これらのMarkdownテクニックを駆使し、ユーザーが直感的に操作でき、価値を最大限に引き出せるDifyアプリを構築してみてください！

参考文献

https://qiita.com/Qiita/items/c686397e4a0f4f11683d#fnref-baz

https://qiita.com/masterpiecehack/items/990683b706b70b88b4c7