ClaudeSoftwareShipping codeAI score · 73/100AI-assisted edit · no obvious prompt-injection riskX

One Prompt to Add Pele Chart Rendering to a Blog While Keeping Mermaid

Input: natural-language requirement; Processing: AI coding assistant generates integration code; Output: blog commit with dual pele + mermaid rendering

Some experienceStepsPromptTip
Who
Developers with blog maintenance experience using AI coding assistants
You get
Drive AI to integrate a third-party chart library via a single prompt while preserving existing mermaid rendering
You need
Gemini

Constraints

Submit a natural-language prompt directly in an AI coding assistant (e.g., Cursor, Claude Code, or similar conversational coding environment), asking to add pele rendering support alongside existing mermaid configuration. The author did not specify the blog framework; verify your own project structure and build process. Model versions mentioned (Gemini 4 Argon, Opus 5.5) are preview/internal codenames, not publicly released stable versions.

What they did

Author wangwei1237 discovered pele, a mermaid chart rendering library, while maintaining a personal blog. Wanting to add pele rendering alongside existing mermaid support, he composed a natural-language prompt. He first tried it on Gemini 4 Argon, which spent 20 minutes browsing code without starting optimization; then switched to Opus 5.5, which completed the code changes in 2 minutes and committed them to his GitHub repository (commit c22f234).

How it went

Author reported: Gemini 4 Argon performed poorly on a simple coding task, failing to complete in 20 minutes; Opus 5.5 was significantly more efficient, delivering committable code in 2 minutes. (author_report)

Worth knowing

Model choice may greatly affect efficiency for similar tasks, but a single anecdotal comparison is not a systematic conclusion. The pele library's website is https://pele.run/, same target as the t.co short link in the prompt. The author did not disclose the blog's tech stack (Jekyll, Hexo, etc.); adapt to your own project structure when reproducing. The GitHub commit record serves as completion evidence, though diff content was not shown in the post. '图标渲染' in the source prompt appears to be a typo for '图表渲染' (chart rendering), preserved as in the original. 'Gemini 4 Argon' and 'Opus 5.5' are preview/internal codenames, not publicly released stable version numbers.

Steps

  1. Discover the pele library and prepare the requirement

    Learn that pele (https://pele.run/) is a lightweight open-source mermaid chart rendering library. Confirm your blog currently uses mermaid rendering, and prepare the integration request for the AI.

  2. Submit the prompt in an AI coding assistant

    Open your AI coding assistant chat interface and send the prompt below verbatim. The author first tried Gemini 4 Argon, which spent 20 minutes browsing code without starting optimization; then switched to Opus 5.5.

    Execution prompt · Source text。AI coding assistant chat input

    pele（https://t.co/c392wrPTkC）是一款轻量级的开源 mermaid 图标渲染库，我的博客现在用到的渲染是mermaid方式，请按照mermaid的配置方式，为博客增加pele的渲染方式，注意不要去掉对mermaid的支持。

  3. Review AI-generated code and commit

    Wait for the AI to generate modified code files. Verify that pele rendering is correctly wired in and that existing mermaid configuration is not removed or broken. Commit to your repository once confirmed. The author reported Opus 5.5 completed this in 2 minutes with committable code.

Prompt you can copy

Reference prompt · Source text。Confirm the destination, input variables and output format before use.

This block is the prompt. Ads are never placed here.

pele（https://t.co/c392wrPTkC）是一款轻量级的开源 mermaid 图标渲染库，我的博客现在用到的渲染是mermaid方式，请按照mermaid的配置方式，为博客增加pele的渲染方式，注意不要去掉对mermaid的支持。

The prompt in Step 2 is the author's original wording; paste it directly into your AI coding assistant. Consider replacing the t.co short link with the actual pele website https://pele.run/ to ensure the link remains valid.

Source

一段提示词让 AI 编码助手给博客加 pele 图表渲染，同时保留 mermaid 支持（Opus 2 分钟完成提交） · wangwei1237 · X · 2026-10-21T03:44:41.000Z

Comments & feedback

Tried this method? Share results, problems or improvements. Comments appear after moderation. Please avoid sensitive information.

Loading…

    Related