中文快速跳转

Multi-tier drawing plugin for the OpenCode ecosystem — bringing Mermaid diagrams, Matplotlib visualizations, Plotly.js interactive charts, and AIGC image generation to your AI coding agent.

OpenPrism extends OpenCode with multi-tier visual capabilities, enabling your AI assistant to think, compute, and create visually.

Version: 0.1.0 (current)

• Why OpenPrism?
• Features
• Use Cases
• Modes: Web vs CLI
• Limitations (current)
• Quick Start
• Available Tools
• About the authors / credits
• Open source

When doing research + engineering with coding agents, pure text is often not enough:

• New system design → you want a flowchart / architecture diagram
• Computation results → you want a plot / chart
• Complex design or user request → you want AI-generated concept images / mockups

OpenPrism is built to make “coding agent for research” feel more like a real lab notebook: text + figures + diagrams.

Simply include Mermaid code blocks in your conversation. OpenPrism auto-renders them:

{
  "data": [
    {"x": ["Jan", "Feb", "Mar", "Apr"], "y": [120, 135, 148, 162], "name": "Product A", "type": "scatter"},
    {"x": ["Jan", "Feb", "Mar", "Apr"], "y": [90, 95, 102, 88], "name": "Product B", "type": "scatter"},
    {"x": ["Jan", "Feb", "Mar", "Apr"], "y": [45, 52, 58, 71], "name": "Product C", "type": "scatter"}
  ],
  "layout": {"title": "Monthly Sales Comparison", "xaxis": {"title": "Month"}, "yaxis": {"title": "Units"}}
}

This plugin supports Web mode and CLI mode.

• Interactive charts are currently supported only in CLI mode.
• AIGC generation in CLI mode is still unstable / has known issues.

If you need interactivity today, prefer CLI mode. If you need AIGC reliability, prefer Web mode for now.

graph LR
    A[OpenCode Agent] -->|tool call| B[OpenPrism Plugin]
    B --> C{Tier?}
    C -->|1| D[Mermaid SSR]
    C -->|2a| E[Matplotlib Bridge]
    C -->|2b| F[Plotly.js]
    C -->|3| G[AIGC Providers]
    G --> G1{Provider?}
    G1 -->|Gemini| G2[Google Gemini API]
    G1 -->|OpenRouter| G3[OpenRouter API]
    D --> H[SVG/PNG Output]
    E --> H
    G2 --> H
    G3 --> H
    F --> I[MediaServer]
    I --> J[Interactive Viewer]
    H --> K[Asset Manager]
    K --> L[.opencode/plots/]

OpenPrism also installs lifecycle hooks that enhance the agent automatically:

Due to OpenCode permission constraints:

1. Click-to-zoom image may navigate away, and when you come back the session may refresh. Strongly recommended: right-click the image and choose Open in new tab.

2. Large image assets may crash the browser, because we currently have to embed them into context using base64 data URIs.

3. When interacting with LLMs, images are replaced by placeholders. Generated images cannot be kept inside LLM context for now.

4. Plotly.js interactive viewer is work-in-progress in Web mode. (Interactive charts currently work in CLI mode only.)

We will actively explore submitting PRs to OpenCode to remove these constraints and provide a more ideal experience.

npm registry installation is work-in-progress. For now, we recommend installing directly from GitHub.

# 1) Install OpenPrism from GitHub
npm install github:SOAR-Robotics-Lab/OpenPrism

# 2) Enable it in OpenCode
# Add to opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "plugin": ["openprism"]
}

Then restart OpenCode.

• Install the plugin from GitHub:

  npm install github:SOAR-Robotics-Lab/OpenPrism

• Ensure opencode.json contains:

  {
    "$schema": "https://opencode.ai/config.json",
    "plugin": ["openprism"]
  }

• Restart OpenCode session / reload workspace.

• If the user asks for diagrams/plots/images:

  • Prefer Tier 1 Mermaid for structure/process.
  • Prefer Tier 2a Matplotlib for computed plots.
  • Use Tier 3 AIGC when a visual concept/mockup is required.
  • If the user explicitly requires interactive charts, switch to CLI mode.

Installation guide style inspired by: https://github.com/code-yeongyu/oh-my-opencode

npm install -g @mermaid-js/mermaid-cli

pip install matplotlib

Tier 2b — Plotly.js requires no installation. The library is loaded from CDN when charts are viewed in the browser. (Web viewer is WIP; CLI supports interactivity today.)

Set at least one provider API key as an environment variable:

# Option A: Google Gemini (recommended — supports generation + editing)
export GEMINI_API_KEY="your-gemini-api-key"

# Option B: OpenRouter (supports generation via Seedream, etc.)
export OPENROUTER_API_KEY="your-openrouter-api-key"

OpenPrism auto-detects available providers. If both keys are set, Gemini is used by default.

Supported models:

You can also pass model, aspectRatio, resolution, and style parameters to the generate_image tool for fine-grained control.

Renders Mermaid diagram source to SVG, PNG, or PDF.

Scans the project directory and generates a Mermaid architecture diagram or ASCII tree.

Executes a Python/Matplotlib script and saves the generated plot.

The plugin automatically:

• Injects matplotlib.use('Agg') for headless rendering
• Appends plt.savefig(...) with the configured output path
• Strips any plt.show() calls from user scripts
• Detects .venv, conda, or system Python environments

Creates an interactive Plotly.js chart and returns a viewer URL that opens in the browser.

Generates or edits images via built-in AIGC providers (Gemini, OpenRouter).

• SOAR-LAB is a robotics research team led by Dr. Xu Hao (SOAR-LAB, Flying General Intelligence Lab).
• This project is co-developed with the Mondo Robotics engineering team, and funded by Mondo Robotics.
• Motivation: while tuning learning experiments, repeatedly digging through the filesystem for plots and artifacts is painful. Visualization is not a “nice-to-have” — it is essential for research workflows inside coding agents. OpenPrism was built (and open-sourced) to make that loop dramatically faster.
• Need help or found a bug? Please open an issue. Dr. Xu plans to deploy an agent to automatically collect feedback and turn it into actionable improvements.
• 100% vibe coding generated. Manual coding is dead. Vibe coding lives forever.

Repo: https://github.com/SOAR-Robotics-Lab/OpenPrism

MIT

Back to English

面向 OpenCode 生态的多层级绘图插件 ——把 Mermaid 结构图、Matplotlib 论文级可视化、Plotly.js 交互图表，以及 AIGC 图像生成带到你的 AI coding agent 里。

OpenPrism 为 OpenCode 增强多层级可视化能力，让你的 AI 助手不仅能“算”和“写”，还能“画”出来。

版本： 0.1.0（当前）

• 为什么要做 OpenPrism？
• 功能特性
• 典型用例
• 模式说明：Web / CLI
• 当前限制（limitation）
• 快速开始
• 作者说明 / 致谢
• 开源地址

科研 + 工程里，纯文字经常不够用：

• 新系统设计 → 需要 流程图 / 架构图
• 计算结果 → 需要 曲线图 / 统计图
• 复杂设计或用户需求 → 需要 AI 效果图 / 概念图

OpenPrism 目标是把 coding agent 变成更像实验室笔记本：文字 + 图 + 图表 + 结构图。

对话中直接写 Mermaid 代码块，OpenPrism 会自动渲染：

{
  "data": [
    {"x": ["Jan", "Feb", "Mar", "Apr"], "y": [120, 135, 148, 162], "name": "Product A", "type": "scatter"},
    {"x": ["Jan", "Feb", "Mar", "Apr"], "y": [90, 95, 102, 88], "name": "Product B", "type": "scatter"},
    {"x": ["Jan", "Feb", "Mar", "Apr"], "y": [45, 52, 58, 71], "name": "Product C", "type": "scatter"}
  ],
  "layout": {"title": "Monthly Sales Comparison", "xaxis": {"title": "Month"}, "yaxis": {"title": "Units"}}
}

本插件支持 Web 模式 与 CLI 模式。

• 可交互数据图表目前仅在 CLI 模式可用。
• CLI 模式下的 AIGC 生成仍有问题（不稳定/已知缺陷）。

如果你现在就需要交互图表，优先使用 CLI 模式；如果你更依赖 AIGC 的稳定性，建议暂时优先使用 Web 模式。

由于 OpenCode 本身的权限限制，导致：

1）图片单击放大时会跳转，并且返回时有可能会话被刷新；强烈建议：右键 Open in new tab 放大查看。 2）图片资源过大可能会引起浏览器崩溃，这是因为我们不得不用 base64 嵌入在上下文中。 3）跟 LLM 交互时图片会被替换为 placeholder，暂时不支持把生成的图片也放入上下文。 4）Plotly.js 的可交互插件 Web 模式 work-in-progress（CLI 模式已可用）。

作者会积极探索给 OpenCode 提 PR 解决限制，以获得更理想的体验！

通过 npm 官方包管理器直接安装 work-in-progress。暂时推荐使用 npm GitHub 安装。

# 1) 从 GitHub 安装 OpenPrism
npm install github:SOAR-Robotics-Lab/OpenPrism

# 2) 在 OpenCode 配置中启用
# 在 opencode.json 里加入：

{
  "$schema": "https://opencode.ai/config.json",
  "plugin": ["openprism"]
}

然后重启 OpenCode。

• 从 GitHub 安装：

  npm install github:SOAR-Robotics-Lab/OpenPrism

• 确保 opencode.json 包含：

  {
    "$schema": "https://opencode.ai/config.json",
    "plugin": ["openprism"]
  }

• 重启 OpenCode 会话/刷新工作区。

• 当用户提出“画图/可视化/效果图”需求时：

  • 结构/流程优先用 Tier 1 Mermaid
  • 需要计算再画优先用 Tier 2a Matplotlib
  • 需要概念图/素材优先用 Tier 3 AIGC
  • 如果用户明确要求 可交互图表：切换到 CLI 模式

安装教程风格参考：https://github.com/code-yeongyu/oh-my-opencode

##（可选）各层依赖

npm install -g @mermaid-js/mermaid-cli

pip install matplotlib

Tier 2b — Plotly.js 无需安装，浏览器端通过 CDN 加载。（Web 交互 Viewer 仍在开发中；CLI 已可交互。）

至少配置一个 API Key 环境变量：

# 方案 A：Google Gemini（推荐：支持生成 + 编辑）
export GEMINI_API_KEY="your-gemini-api-key"

# 方案 B：OpenRouter（支持生成，如 Seedream 等）
export OPENROUTER_API_KEY="your-openrouter-api-key"

OpenPrism 会自动检测可用提供方；如果两者都配置，默认优先 Gemini。

• SOAR-LAB（飞行通用智能实验室） 是由 徐浩博士 领衔的机器人科研团队。
• 本项目由徐博士与 妙动（Mondo Robotics） 科技团队联合开发，并由妙动科技提供资助与工程支持。
• 项目缘起：在调 learning/实验时反复翻文件系统找结果极其低效——而在 coding agent 场景下，“随手可视化”对科研是刚需。OpenPrism 希望把这件事变得顺滑：该画就画，该算就算，结果就地展示。
• 如遇问题请直接提 issue；徐博士计划部署一个 agent 自动收集反馈、归纳共性问题，并持续迭代改进。
• 本项目 100% vibe coding 生成：古法手动编程已死，vibe coding 万岁！

https://github.com/SOAR-Robotics-Lab/OpenPrism

MIT