diagram-to-image

Render Mermaid diagrams and icon blocks into PNG or SVG images.

11|2|Updated Jun 25, 2025
One-click install
npx skills add https://github.com/cklxx/elephant.ai --skill diagram-to-image
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagram-to-image
Source: https://github.com/cklxx/elephant.ai/tree/main/skills/diagram-to-image
Command: npx skills add https://github.com/cklxx/elephant.ai --skill diagram-to-image

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

将 Mermaid 流程图、架构图或图标块渲染为可直接在 Lark 发送的高质量图片,省去手动导出和截图的繁琐。

Core Features & Use Cases

  • Mermaid、流程图、架构图等快速渲染为 PNG/SVG,可直接发在群聊或备注中。
  • Icon Blocks(结构化图标块)也可渲染成美观的图片,便于信息传达。
  • 直接共享:输出的图片可直接在 Lark 中发送,提升协作效率。

Quick Start

在对话中提供 Mermaid 源码(可包含 Mermaid 代码块)或结构化的图标块数据,系统将默认输出 PNG 图像,如需 SVG 也可输出。

Frequently Asked Questions about diagram-to-image

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render Mermaid diagrams into PNG or SVG images for documentation?

You can render Mermaid diagrams into PNG or SVG images by providing the Mermaid source code as input, which processes the code blocks into ready-to-share image artifacts. The system defaults to PNG output and supports optional SVG generation.

Can I convert structured icon blocks into shareable images for Lark messages?

Yes, you can convert structured icon blocks into shareable images for Lark messages. The tool accepts structured icon block inputs within chat workflows and renders them into visual image artifacts ready for direct message attachment.

What is the best way to export architecture diagrams without taking manual screenshots?

The best way to export architecture diagrams without manual screenshots is to input the Mermaid source code directly into the chat workflow. This automatically renders the architecture diagram into a high-quality PNG or SVG image file.

Does this diagram rendering tool support SVG output or is it limited to PNG?

The diagram rendering tool supports both formats and is not limited to PNG. It uses the diagram_render tool to produce PNG images by default, with optional SVG output available if you specify the format requirement.

Do I need any external dependencies to render Mermaid code into images?

No, you do not need any external dependencies to render Mermaid code into images. The Skill operates independently without requiring any additional components or libraries to process Mermaid code and output image artifacts.