Add support for antvis/Infographic #21505

Open
opened 2026-02-21 20:12:53 -05:00 by yindo · 5 comments
Owner

Originally created by @crazywoola on GitHub (Jan 7, 2026).

Self Checks

  • I have read the Contributing Guide and Language Policy.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report, otherwise it will be closed.
  • Please do not modify this template :) and fill in all the required fields.

1. Is this request related to a challenge you're experiencing? Tell me about your story.

integrate Infographic with current frontend template

2. Additional context or comments

No response

3. Can you help us with this feature?

  • I am interested in contributing to this feature.
Originally created by @crazywoola on GitHub (Jan 7, 2026). ### Self Checks - [x] I have read the [Contributing Guide](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) and [Language Policy](https://github.com/langgenius/dify/issues/1542). - [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [x] I confirm that I am using English to submit this report, otherwise it will be closed. - [x] Please do not modify this template :) and fill in all the required fields. ### 1. Is this request related to a challenge you're experiencing? Tell me about your story. integrate [Infographic](https://github.com/antvis/Infographic) with current frontend template ### 2. Additional context or comments _No response_ ### 3. Can you help us with this feature? - [ ] I am interested in contributing to this feature.
yindo added the 💪 enhancementgood first issue labels 2026-02-21 20:12:53 -05:00
Author
Owner

@Lemonadeccc commented on GitHub (Jan 13, 2026):

Could you please describe the requirements in more detail so that I can assess whether I can fulfill them? Thank you.

@Lemonadeccc commented on GitHub (Jan 13, 2026): Could you please describe the requirements in more detail so that I can assess whether I can fulfill them? Thank you.
Author
Owner

@eureka928 commented on GitHub (Jan 16, 2026):

Can you give me more information?

  1. Use case: Where should infographics appear? (Chat responses? Document generation? Workflow outputs?)
  2. Streaming requirement: Should it progressively render like echarts?
  3. Template scope: All 200+ templates or a curated subset?
@eureka928 commented on GitHub (Jan 16, 2026): Can you give me more information? 1. Use case: Where should infographics appear? (Chat responses? Document generation? Workflow outputs?) 2. Streaming requirement: Should it progressively render like echarts? 3. Template scope: All 200+ templates or a curated subset?
Author
Owner

@jubinsoni commented on GitHub (Jan 16, 2026):

@crazywoola pls review
https://github.com/langgenius/dify/pull/31141

we have to add below prompt to generate 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

Result
Image

@jubinsoni commented on GitHub (Jan 16, 2026): @crazywoola pls review https://github.com/langgenius/dify/pull/31141 we have to add below prompt to generate 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 ``` **Result** <img width="623" height="775" alt="Image" src="https://github.com/user-attachments/assets/d975059d-1400-408d-a307-d7c683e0902d" />
Author
Owner

@crazywoola commented on GitHub (Jan 25, 2026):

The output area should be capable of displaying infographic images and ECharts-like content, or other similar visual formats. A critical feature is the ability to download these visuals as images.@eureka928 @Lemonadeccc

@crazywoola commented on GitHub (Jan 25, 2026): The output area should be capable of displaying infographic images and ECharts-like content, or other similar visual formats. A critical feature is the ability to download these visuals as images.@eureka928 @Lemonadeccc
Author
Owner

@crazywoola commented on GitHub (Jan 26, 2026):

@crazywoola pls review #31141

we have to add below prompt to generate 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

Result Image

It seems the second image is not rendered correctly.

@crazywoola commented on GitHub (Jan 26, 2026): > [@crazywoola](https://github.com/crazywoola) pls review [#31141](https://github.com/langgenius/dify/pull/31141) > > we have to add below prompt to generate 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 > ``` > > **Result** <img alt="Image" width="623" height="775" src="https://private-user-images.githubusercontent.com/29531094/537019526-d975059d-1400-408d-a307-d7c683e0902d.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Njk0ODIzNjgsIm5iZiI6MTc2OTQ4MjA2OCwicGF0aCI6Ii8yOTUzMTA5NC81MzcwMTk1MjYtZDk3NTA1OWQtMTQwMC00MDhkLWEzMDctZDdjNjgzZTA5MDJkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjAxMjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwMTI3VDAyNDc0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMxZDI0MTRlMDNjMGU1NGQ3YTY5YWJhMDhjOGI5ZWNmYzcwMjY2ZjM2ZTQwN2Q4MjJmNGEwYTViYTllZDA0MGQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.UW4SEl-3gOnMmGIxz_beSJ39tiIt_7_A0XHy0QP_nH4"> It seems the second image is not rendered correctly.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#21505