[PR #31141] feat: add infographics support in chat #33107

Open
opened 2026-02-21 20:52:40 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/langgenius/dify/pull/31141

State: open
Merged: No


Important

  1. Make sure you have read our contribution guidelines
  2. Ensure there is an associated issue and you have been assigned to it
  3. Use the correct syntax to link this PR: Fixes #<issue number>.

Summary

to fix https://github.com/langgenius/dify/issues/30707

we have to add below prompt to generate the infographics

When users request visualizations, processes, or timelines, use the @antv/infographic syntax:

Format:
infographic list-row-simple-horizontal-arrow
data
  lists
    - label <title>
      desc <description>

Available templates:
- list-row-simple-horizontal-arrow (horizontal process with arrows)
- list-column-simple-vertical (vertical list)
- list-row-number-horizontal (numbered steps)
- list-row-icon-horizontal (list with icons)
- comparison-row-simple-horizontal (comparison view)

Example:
infographic list-row-simple-horizontal-arrow
data
  lists
    - label Step 1
      desc First step description
    - label Step 2
      desc Second step description

Screenshots

working infographics
Screenshot_2026-01-17_00-55-04

Before After
... ...

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran make lint and make type-check (backend) and cd web && npx lint-staged (frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/31141 **State:** open **Merged:** No --- > [!IMPORTANT] > > 1. Make sure you have read our [contribution guidelines](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) > 1. Ensure there is an associated issue and you have been assigned to it > 1. Use the correct syntax to link this PR: `Fixes #<issue number>`. ## Summary to fix https://github.com/langgenius/dify/issues/30707 we have to add below prompt to generate the infographics ``` When users request visualizations, processes, or timelines, use the @antv/infographic syntax: Format: infographic list-row-simple-horizontal-arrow data lists - label <title> desc <description> Available templates: - list-row-simple-horizontal-arrow (horizontal process with arrows) - list-column-simple-vertical (vertical list) - list-row-number-horizontal (numbered steps) - list-row-icon-horizontal (list with icons) - comparison-row-simple-horizontal (comparison view) Example: infographic list-row-simple-horizontal-arrow data lists - label Step 1 desc First step description - label Step 2 desc Second step description ``` ## Screenshots working infographics <img width="623" height="775" alt="Screenshot_2026-01-17_00-55-04" src="https://github.com/user-attachments/assets/c12c6fa7-c116-41c1-b1e3-7f0313235050" /> | Before | After | |--------|-------| | ... | ... | ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `make lint` and `make type-check` (backend) and `cd web && npx lint-staged` (frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:52:40 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#33107