code to image MCP

📸 MCP图像编码

MCP服务器，用于使用Pygments和Pillow生成高质量的代码截图。

📁 项目结构

code_to_image_mcp/
├── server.py              # MCP сервер (точка входа)
├── src/                   # Пакет с бизнес-логикой
│   ├── __init__.py
│   ├── code_to_image.py   # Генерация скриншотов кода
│   ├── diagram_renderer.py # Рендеринг PlantUML диаграмм
│   ├── font_manager.py    # Управление шрифтами
│   ├── font_initializer.py # Инициализация шрифтов для PlantUML
│   ├── image_utils.py     # Утилиты для работы с изображениями
│   └── guide_manager.py   # Управление гайдами по PlantUML
├── tests/                 # Тесты и демонстрационные скрипты
│   ├── test_*.py         # Unit-тесты
│   └── demo_all_diagrams.py # Демо всех типов диаграмм
├── asset/                 # Ресурсы
│   ├── bins/             # PlantUML JAR
│   ├── fonts/            # TTF шрифты
│   └── themes/           # PlantUML темы
└── doc/                   # Документация
    ├── plantuml_guides/  # Гайды по PlantUML
    └── ideas/            # Идеи и планы

✨ 特点

• 🎨 多种样式 -Monokai，Dracula，Github Dark，Vim等
• 🔍 高质量 -水晶清晰度的比例因子
• 📝 字符串编号 -自定义样式和缩进
• 🌈 语言支持 Python，TypeScript，JavaScript，SQL，Go，Rust等等。
• 💾 输出格式 -WEBP、PNG、JPEG
• ⚙️ 软调谐 -字体，大小，缩进

📦 安装

1.创建虚拟环境

python -m venv venv
.\venv\Scripts\Activate.ps1

2.建立依赖关系

pip install -r requirements.txt

🚀 发射

局部测试

python server.py

Cline中的配置

将Cline（Settings→MCP Servers）添加到MCP服务器设置中：

{
  "mcpServers": {
    "code-screenshot": {
      "command": "c:\\PY\\code_to_image_mcp\\venv\\Scripts\\python.exe",
      "args": ["c:\\PY\\code_to_image_mcp\\server.py"]
    }
  }
}

重要的是： 通往…的道路 python.exe 必须指向虚拟项目环境中的解释器！

💡 使用

MCP服务器提供 七个工具:

代码截图

1. generate_code_screenshot -从代码行创建截图
2. generate_file_screenshot 从文件中创建截图（⚠️ 限制200行）
3. generate_entity_screenshot 从Python文件中提取函数/类并创建截图（✨ 无字符串限制）

植物图

1. generate_architecture_diagram -从PlantumL代码生成图表
2. generate_diagram_from_file -从.PUML文件生成图表（节省令牌）
3. get_plantuml_guide -Plantuml语法帮助
4. list_plantuml_themes -可用主题列表

Cline查询示例

代码行截图：

Создай скриншот этого Python кода и сохрани в C:/screenshots/example.webp

文件截图：

Сделай скриншот файла C:/projects/app.py и сохрани в C:/screenshots/app.webp

大文件功能截图：

Создай скриншот функции process_string из файла C:/PY/code_to_image_mcp/test/test_functions.py

定制：

Сделай скриншот метода DataProcessor.validate в стиле dracula, 
размер шрифта 20, масштаб 4x, без декораторов

无行编号：

"Создай скриншот SQL запроса без номеров строк, 
стиль github-dark, формат WEBP"

工具

1.generate_code_screenshot

从提交的代码行创建截图。

2.generate_file_screenshot

从文件中创建截图。通过文件扩展名自动检测语言。

⚠️ 重要的是： 最大文件大小- 200行对于大型文件，请使用 generate_entity_screenshot.

支持的扩展： .py, .js, .ts, .jsx, .tsx, .java, .c, .cpp, .cs, .go, .rs, .rb, .php, .swift, .kt, .scala, .sql, .html, .css, .json, .yaml, .yml, .xml, .sh, .bat, .ps1, .md

3️⃣ generate_entity_screenshot 从Python文件中提取函数/类

智能工具 从大型Python文件中创建特定功能、类或方法的截图，而不受大小限制。

例1：提取函数

Создай скриншот функции process_string из файла C:/test/test_functions.py

例2：提取类

Создай скриншот класса DataProcessor из C:/code/processor.py с шрифтом FiraCode

例3：提取类方法

Создай скриншот метода DataProcessor.validate из C:/code/processor.py без декораторов

它是如何工作的：

• 使用 AST（抽象语法树） 精确提取代码
• 自动定义函数/类边界
• 支持装饰器（可以打开/关闭）
• 对源文件大小没有限制 -只提取所需的实体

重要（限制）： generate_entity_screenshot 只与 python档案（*.py). 工具使用模块 ast 为了解析代码，他只懂 Python语法如果你用另一种语言（如JavaScript）传输文件， TypeScript，Go等。D.其他事项）parser将 SyntaxError 或其他例外。

如果您需要为其他语言的文件创建屏幕截图，请使用 generate_file_screenshot （渲染整个文件）或手动生成代码 并通过 generate_code_screenshot.

Entity_name格式：

• 功能： function_name
• 等级： ClassName
• 方法 ： ClassName.method_name

屏幕截图中包含的内容：

• 装饰师（如果 include_decorators=True)
• 函数/类签名
• 函数/类体
• 元数据：实体名称、源文件、字符串范围

工具设置

常规设置：

≫参数≫类型≫默认≫描述≫ |----------|-----|--------------|----------| | output_path |str| *一定* 绝对文件路径 | language STR取决于工具，编程语言。 | style |str| monokai 语法背光风格 | font |str| JetBrainsMono |Шрифт（JetBrains Mono/FiraCode/CascadiaCode）| | font_size |int| 14-18 –基本字体大小。 | scale_factor |浮子| 2.0-3.0 缩放因子（1.0-5.0）！ | line_numbers bool的。 True 显示字符串编号。 | image_format |str| webp 图片格式（WebP/PNG/JPEG）

特定于 generate_entity_screenshot:

≫参数≫类型≫默认≫描述≫ |----------|-----|--------------|----------| | file_path |str| *一定* Python源文件路径 | entity_name |str| *一定* 函数/类/方法名称 | include_decorators bool的。 True 在屏幕截图中加入装饰元素

质量等级（detail_level）

参数 detail_level 通过内部控制图像缩放 scale_factor:

ÐÐÐÐÐÐÐÐÐÐÐÐÐ |---------|-------------|-----------|---------------| | Low –1.0 x基本–“快速预览，低质量–” | Medium Ð2.0x¸2x¸Web文档，平衡质量¸ | High |3.0倍| 3倍| 默认情况下 -高质量。 | Ultra –4.0 x 4 x–演示、打印、非常高的质量→ | Extreme 5.0 x 5 x最大质量，大文件大小→

建议：

• 对于Web文档： Medium （2.0倍）
• GitHub Readme： High （3.0倍）
• 对于演示： Ultra （4.0倍）
• 高分辨率打印： Extreme （5.0倍）

流行风格

• monokai 经典黑暗主题
• dracula -流行的紫色主题
• github-dark -黑暗主题中的GitHub风格
• vim Vim编辑器风格
• one-dark Atom One Dark风格
• nord -冷斯堪的纳维亚调色板

支持的语言

Python、JavaScript、TypeScript、Java、C、C++、C#、Go、Rust、Ruby、PHP、Swift、Kotlin、Scala、SQL、HTML、CSS、Shell、Bash、PowerShell、JSON、YAML、Markdown。

______________________________________________________________________

📐 生成建筑图

除了代码截图，服务器还支持创建 UML图 通过带有定制主题的Plantuml。

⚠️ AI代理的关键规则

生成图表时，请确保遵循以下规则：

1. 从来 不要使用指令 !theme 或 !include 在图表代码中

- 主题通过参数自动应用 theme_name - 错误示例：❌ !theme dark_gold в图代码 - 正确的：✅ 转交 theme_name='dark_gold' 在参数中

1. 总是 使用 list_plantuml_themes 在生成图表之前

- 不要提出不存在的问题（darkblue, ocean, corporate) - 可用主题： default, dark_gold, light_fresh

1. 总是 使用 get_plantuml_guide 对于复杂的图表

- 在生成之前检查语法 - 研究可用的陈规定型观念和元素

1. 只使用刻板印象 设计元素

- >, >, > 建筑 - 不要手动使用硬编码颜色（#000000, #Red) - 主题自动应用正确的颜色

1. 让主题控制所有颜色

- 你的任务是图表结构，而不是外观 - 主题将确保设计的一致性

正确使用示例：

Cline: Создай component diagram с темой dark_gold

AI Agent:
1. Вызов list_plantuml_themes() → подтверждаю что 'dark_gold' существует
2. Вызов get_plantuml_guide(diagram_type='component') → изучаю синтаксис
3. Генерирую PlantUML код БЕЗ !theme директив
4. Вызов generate_architecture_diagram(diagram_code=..., theme_name='dark_gold')

错误使用示例：

❌ @startuml
❌ !theme dark_gold          ← ОШИБКА: НЕ используйте !theme
❌ component API #FF0000     ← ОШИБКА: НЕ хардкодите цвета
❌ @enduml

🎨 定型观念

用于创建建筑图 定型观念的强制性合同自动应用选定主题的配色方案：

ÐÐÐÐÐÐÐÐÐÐÐÐÐ |-----------|------------|-------------------------|----------------------| | > 适配器（API，UI，CLI）🟡 黄金（#ffd700）–rest API，graphql gateway→ | > 商业逻辑的核心🔵 蓝色（#4169e1）–域服务，使用案例› | > 基础设施（DB，缓存）🟢 绿色（#32cd32）–PostgreSQL，Redis，S3。

组件图示例：

@startuml
component "REST API" > as api
component "Order Service" > as order
database "PostgreSQL" > as db

api --> order : uses
order --> db : stores
@enduml

🎭 可用主题

MCP服务器包括 3准备好的主题:

1. dark_gold （默认）-深色背景，金色口音
2. light_fresh -明亮的背景，新鲜的粉彩颜色
3. default -标准植物调色板

主题预览： doc/pantuml_guides/themes.md

🛠️ MCP图表工具

服务器提供 4专用工具 对于Plantuml：

1. generate_architecture_diagram

从自动应用主题的Plantuml代码创建图表。

Cline查询示例：

Создай component diagram для микросервисной архитектуры с темой dark_gold:
- API Gateway (Adapter)
- Auth Service (Core)
- PostgreSQL (Infrastructure)

参数：

≫参数≫类型≫默认≫描述≫ |----------|-----|--------------|----------| | diagram_code |str| *一定* –Plantuml图表代码› | output_path |str| *一定* PNG输出路径 | theme |str| dark_gold 标签：dark_gold/light_fresh/default | diagram_type |str| component 图类型（component/class/sequence/activity）

2. generate_diagram_from_file

从保存的图表 .puml 文件-节省令牌，简化复杂图表的工作。

Cline查询示例：

Сгенерируй диаграмму из файла C:/diagrams/architecture.puml с темой dark_gold

参数：

≫参数≫类型≫默认≫描述≫ |----------|-----|--------------|----------| | file_path |str| *一定* ≫使用Plantuml代码的.puml文件路径› | output_path |str| *一定* 通往输出图像的路 | theme |str| dark_gold 标签：dark_gold/light_fresh/default | detail_level |str| High 详细度（Low/High） | image_format |str| png 格式（PNG/SVG/EPS/PDF）→

3. get_plantuml_guide

返回人工智能代理的PlantumL语法帮助。

例子：

Покажи мне краткий гайд по sequence диаграммам

参数：

• diagram_type: class, sequence, component, activity, themes
• detail_level: brief （短）或 full （完整）

4. list_plantuml_themes

显示包含描述的所有可用主题的列表。

答复：

{
  "themes": [
    {"name": "dark_gold", "description": "Темный фон, золотые акценты"},
    {"name": "light_fresh", "description": "Светлый фон, пастельные тона"},
    {"name": "default", "description": "Стандартная PlantUML палитра"}
  ]
}

📚 Plantuml文档

关于深度潜水，见。文件：

• AI代理指南 -简短的语法说明

- 类图 - 顺序图 - 构件图 - 活动图 - 主题指南

• Plantuml主题创建指南 - ⭐ 如何在没有视觉艺术品的情况下创建自己的主题

• 开发人员主题指南 -内部技术化体系结构

• 项目体系结构 -Plantuml渲染是如何工作的

🎯 快速启动图表

步骤1： 请Cline创建图表

Создай class diagram для паттерна Strategy с темой light_fresh

步骤2： AI代理自动：

• 请求海德通过 get_plantuml_guide
• 生成带有正确刻板印象的植物代码
• 引起 generate_architecture_diagram 选定主题

步骤3： 获得专业设计的现成PNG图表

⚙️ 技术要求

要使Plantuml图表正常工作，必须：

• Java JRE 11+ 在Path
• PlantUML JAR（包括 asset/bins/plantuml.jar)
• 自定义字体在第一次运行时自动设置

Java测试：

java -version

如果没有安装Java：

• 窗户： Adoptium JDK
• macOS： brew install openjdk@17

______________________________________________________________________

🛠️ 直接使用函数

如果不使用MCP：

from src.code_to_image import create_code_screenshot

code = """
def hello_world():
    print("Hello, World!")
"""

create_code_screenshot(
    code_string=code,
    language="python",
    output_file="C:/screenshots/hello.webp",
    style="dracula",
    font_size=20,
    scale_factor=4,
    line_numbers=True
)

🔧 解决问题

全面指导： 故障排除.md

常见问题： 常见问题.md

快速解决方案

Оибка：“找不到字体”

font_name="Consolas"  # Безопасный шрифт для Windows

Оибка：“道路必须是绝对的”

output_path="C:/screenshots/image.webp"  # ✅ Правильно

MCP服务器未连接

1. 检查路径 venv\Scripts\python.exe 配置
2. 控制键：Ctrl+Shift+P→ “开发人员：重新加载窗口”

🎯 什么时候使用什么工具？

工具，工具，原因。 |----------|------------|---------| 一小段代码 generate_code_screenshot 快，不需要档案。 整个文件（≤200行）→ generate_file_screenshot 方便小文件。 具体功能/等级 generate_entity_screenshot 从大型文件中精确提取 课堂方法 generate_entity_screenshot 格式支持 ClassName.method_name | 文件>200行全部❌ 不支持使用 generate_entity_screenshot 对于个别部分。

📄 许可证

麻省理工学院

👨‍💻 作者

它是使用AI助手开发的，以创建高质量的代码截图。

______________________________________________________________________

理事会： 为了最大限度地提高质量，使用 scale_factor: 4-5 格式 PNG.