diagram-renderer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Diagram Renderer

图表渲染工具

Overview

概述

This skill acts as a rendering engine for text-based diagrams. It takes code (like Mermaid or PlantUML) as input and outputs high-quality image files.

本Skill作为基于文本的图表渲染引擎，以Mermaid或PlantUML等代码作为输入，输出高质量的图像文件。

Capabilities

功能

1. Brand-Themed Rendering

1. 品牌主题渲染

Palette Awareness: Automatically looks up
```
knowledge/templates/themes/palettes/
```
for brand-specific colors.
Dynamic Styling: Injects Mermaid
```
%%{init: ...}%%
```
directives to match the chart's colors with the overall project theme defined in
```
visual_harmony_guide.md
```
.

调色板感知：自动查找
```
knowledge/templates/themes/palettes/
```
目录获取品牌专属配色。
动态样式设置：注入Mermaid的
```
%%{init: ...}%%
```
指令，使图表颜色与
```
visual_harmony_guide.md
```
中定义的整体项目主题保持一致。

2. Multi-Format Output

2. 多格式输出

PlantUML to Image (Planned):
- Future support for
```
.puml
```
  files.

PlantUML转图像（规划中）：
- 未来将支持
```
.puml
```
  文件。

Usage

使用方法

bash

undefined

bash

undefined

Render a Mermaid file to PNG

将Mermaid文件渲染为PNG

node scripts/render.cjs input.mmd output.png

Render specific format (svg, pdf)

渲染为特定格式（svg、pdf）

node scripts/render.cjs input.mmd output.svg

undefined

node scripts/render.cjs input.mmd output.svg

undefined

Dependencies

依赖项

```
@mermaid-js/mermaid-cli
```
(Requires Puppeteer/Chromium)

```
@mermaid-js/mermaid-cli
```
（需要Puppeteer/Chromium）

Knowledge Protocol

知识协议

This skill adheres to the
```
knowledge/orchestration/knowledge-protocol.md
```
. It automatically integrates Public, Confidential (Company/Client), and Personal knowledge tiers, prioritizing the most specific secrets while ensuring no leaks to public outputs.

本Skill遵循
```
knowledge/orchestration/knowledge-protocol.md
```
协议。它会自动集成公共、机密（公司/客户）和个人知识层级，优先使用最具体的保密内容，同时确保不会泄露到公共输出中。