Try to integrating with AntV `Infographic`

[hustcc]

Problem Statement

Using mermaid, we can only create technical diagrams such as flowcharts and sequence diagrams, but some diagrams that require text information are missing, and we need to add some capabilities. Such as:

Proposed Solution

Similar to mermaid, just add a code block with the language name as infographic. Then render the block with @antv/infographic

It is friendly to markdown and AI:

1. There is a syntax similar to Markdown
2. Support rendering with streaming output

• GitHub：https://github.com/antvis/Infographic
• Website: https://infographic.antv.vision/

\`\`\`infographic
infographic list-row-horizontal-icon-arrow
data
  title Product Development Lifecycle
  desc Complete process from requirements to launch
  items
    - label Research
      value 15
      desc User interviews and competitive analysis
      icon mdi/account-search
    - label Review
      value 28
      desc Technical solution and schedule confirmation
      icon mdi/file-document-edit
    - label UI Design
      value 42
      desc Interaction prototype and visual design
      icon mdi/palette
    - label Frontend Dev
      value 58
      desc Page implementation and component encapsulation
      icon mdi/code-tags
    - label Backend Dev
      value 65
      desc API development and database design
      icon mdi/database
    - label Integration Test
      value 78
      desc Function testing and bug fixing
      icon mdi/bug
    - label Canary Release
      value 88
      desc Small-scale validation and data monitoring
      icon mdi/test-tube
    - label Full Launch
      value 100
      desc Official release and user feedback
      icon mdi/rocket-launch
themeConfig
  palette antv

\`\`\`

The markdown will be rendered to svg:

Alternatives Considered

None.

Use Case

import { Streamdown } from 'streamdown';

export default function Page() {
  const markdown = `# Hello World\n\nThis is **streaming** markdown!


infographic list-row-horizontal-icon-arrow
data
  title Product Development Lifecycle
  desc Complete process from requirements to launch
  items
    - label Research
      value 15
...
...


`;
  return <Streamdown>{markdown}</Streamdown>;
}

Priority

Important

Contribution

• I am willing to help implement this feature

Additional Context

No response