Does sql-to-er auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Documentation

Plugin

sql-to-er

优雅的在线 SQL / DBML 转 ER 图工具

FLOW.md

ystemsrx@ystemsrx

GitHub

Plugin Signal55/100Fair

maintained96

capable14

documented50

adopted48

Install

$ npx -y skills add ystemsrx/sql_to_ER --agent claude-code

Run the curl in your terminal, the rest in Claude Code.

Stats

TypeScript JavaScript React HTML Bash

+5 tags

SQL Git GitHub Vitest Vite

181

Stars

Forks

Active

Maintenance

JavaScript

Language

AGPL-3.0

License

8d ago

Last commit

1y ago

Created

Repo: ystemsrx/sql_to_ER

In this plugin

1 skill

- sql2er

See everything inside

What's inside

Skills

/sql2erUse when the user wants a Chen-model ER diagram from SQL CREATE TABLE statements or DBML, wants to rearrange or clean up an existing sql2er state, wants a skeleton-only overview with attributes hidden at generate time, or needs drawio/svg/png/json/html exports with final visual

README

Read on GitHub

🗂️ 最好的 SQL 转 ER 图生成器

优雅的在线 SQL / DBML 转 ER 图工具

English · 简体中文

🌐 在线体验 · Live Demo

🤖 作为 Skill 安装

通过一条命令安装 sql2er Agent Skill：

npx skills add ystemsrx/sql_to_er

✨ 项目简介

一个基于网页的纯前端工具，用于从 SQL CREATE TABLE 语句和 DBML 代码生成 Chen 模型 ER 图。无需登录，无需付费，完全免费开源。

[!NOTE] 为什么做这个？市面上绝大多数 DBML/SQL 转 ER 图的在线工具都需要登录甚至收费，且样式奇丑无比，体验令人失望。于是直接开源一个免费替代品。

[!TIP] 如果你需要绘制的是逻辑模型（而非 Chen 模型），推荐使用 dbdiagram.io，同样免费。

🚀 快速使用

直接访问在线版本即可使用，无需安装：

🔗 ER Diagram Generator

或者克隆到本地开发运行：

本项目使用 pnpm 作为包管理器（已通过 packageManager 字段锁定版本，建议先 corepack enable 让其自动安装）。

git clone https://github.com/ystemsrx/sql_to_ER.git
cd sql_to_ER
corepack enable        # 一次性，启用 Corepack 自动管理 pnpm 版本
pnpm install
pnpm dev

[!WARNING] 请勿直接双击打开 sql2er.html。 本项目使用 Vite + TypeScript，源码中的 .ts/.tsx 和前端依赖需要 Vite 编译与模块解析。开发时请使用：
pnpm dev
然后在浏览器访问 Vite 输出的地址，例如 http://localhost:5173/sql2er.html。如果要用静态服务器，请先执行 pnpm build，再服务 dist/ 目录。

📖 使用步骤

通过 pnpm dev 打开 sql2er.html（参见上方快速使用，或直接访问在线版）
在输入区粘贴 SQL CREATE TABLE 语句或 DBML 代码
点击 「生成 ER 图」 按钮
若对节点位置不满意，可拖拽节点调整布局；双击节点修改内容
在画布上使用滚轮可平滑缩放，按住 Ctrl + 滚轮可围绕图形中心平滑旋转（节点形状与文字方向保持不变）
若图形较复杂，只需将每个矩形（实体）拖到大致位置，再点击 「智能优化」，即可自动整理布局

🧩 支持格式

CREATE TABLE users (
    id INT PRIMARY KEY,
    username VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE
);

CREATE TABLE posts (
    id INT PRIMARY KEY,
    author_id INT,
    title VARCHAR(255),
    FOREIGN KEY (author_id) REFERENCES users(id)
);

Table users {
  id INT [pk]
  username VARCHAR(255) [not null]
  email VARCHAR(255) [unique]
}

Table posts {
  id INT [pk]
  author_id INT
  title VARCHAR(255)
}

Ref: posts.author_id > users.id

🎨 Chen 模型元素

图形	含义	对应数据库概念
🟦 矩形	实体	表
🔶 菱形	关系	外键
⚪ 椭圆	属性	列
下划线	主键标识	主键属性

⚖️ 与标准 Chen 模型的差异

[!IMPORTANT] 本工具为简化使用，在以下方面对标准 Chen 模型做了妥协。如需严格符合学术规范，请参考下方说明手动调整。

关系命名：标准 Chen 模型要求菱形使用语义化名称（如属于、拥有），本工具默认显示外键字段名。
实体与属性命名：标准建议使用业务术语，本工具默认直接使用表名与列名。
自定义修改：
- ✏️ 双击图形元素可直接编辑显示内容
- 🔁 或在源代码（SQL / DBML）中修改后重新生成

🖼️ 效果展示

示例 1

[!TIP] 结构较复杂时，直接生成的图可能不够整齐。此时：

点击 「智能调整」 自动整理——通常此时已足够整齐，仅需微调。

若仍不理想，点击 「快速布局」 再配合「智能调整」通常可得到理想效果。

极少数情况下，可先手动将矩形（实体）拖到合适位置（其他元素无需调整），再点击「智能调整」即可。

实体 / 关系特别多时，可先点击画布左上角的 「隐藏属性」，先把矩形（实体）和菱形（关系）骨架摆到理想位置，再点一次切换回「显示属性」——属性会自动根据当前矩形的位置围绕其均匀分布，避免一上来就被属性干扰拖动。

🕘 生成历史

每次生成 ER 图时都会自动保存一份快照（含缩略图、节点位置、当前显示设置），整理过的布局不会因为重新生成而丢失。

生成历史

打开：点击画布左上角的 🕘 时钟图标打开历史页面。
浏览：直接拖拽卡片，或在面板上滚轮翻动；最近的快照在最前面。
恢复：拖拽任意卡片先把它吸附到中央，再次点击「恢复」即可按当时的节点位置 / 标签重建图（不会重新布局）。
删除：单张快照右下角的 🗑 按钮可单独移除该条记录。
持久化：所有数据都存在浏览器本地的 IndexedDB 中（首次生成非示例 ER 图后才会出现条目）。
会话恢复：刷新或重新打开页面时仅自动恢复 6 小时内编辑的图（含布局）；超过 6 小时会显示初始示例，原有生成历史不会删除。输入框文本另有 localStorage 草稿兜底。

[!TIP] 想撤回上一次手动调整？面板里的「恢复」是按输入文本归档的版本切换，单步撤销 / 重做请用 Ctrl + Z / Ctrl + Y。

🤝 贡献

欢迎提交 Issue 和 Pull Request！如果这个项目对你有帮助，请点一个 ⭐ Star 支持一下。

📄 开源协议

本项目基于 GNU AGPL v3.0 开源。

File tree

137

ystemsrx/sql_to_ERView on GitHub

.gitattributes
.github/
  dependabot.yml
  workflows/
    ci.yml
    pages.yml
.gitignore
.npmrc
.prettierignore
.prettierrc.json
assets/
  base.css
  eg-history.png
  eg1.png
  eg2_opt.png
  eg2.png
  fonts/
    dm-sans-latin-300-normal.woff2
    dm-sans-latin-400-normal.woff2
    dm-sans-latin-500-normal.woff2
    dm-sans-latin-700-normal.woff2
    dm-serif-display-latin-400-italic.woff2
    dm-serif-display-latin-400-normal.woff2
    dm-serif-text-latin-400-italic.woff2
    dm-serif-text-latin-400-normal.woff2
    fonts.css
    jetbrains-mono-latin-400-normal.woff2
    lora-latin-400-italic.woff2
    lora-latin-400-normal.woff2
    lora-latin-500-italic.woff2
    lora-latin-500-normal.woff2
    lora-latin-600-italic.woff2
    lora-latin-600-normal.woff2
    lora-latin-700-italic.woff2
    lora-latin-700-normal.woff2
    poppins-latin-300-normal.woff2
    poppins-latin-400-italic.woff2
    poppins-latin-400-normal.woff2
    poppins-latin-500-normal.woff2
    poppins-latin-600-normal.woff2
    poppins-latin-700-italic.woff2
    poppins-latin-700-normal.woff2
css/
  landing.css
  style.css
index.html
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.en.md
README.md
skills/
  sql2er/
    agents/
      openai.yaml
    references/
      commands.md
      data-model.md
    scripts/
      build.mjs
      engine/
        adapter.ts
        cli.ts
        describe.ts
        exporters.ts
        ops.ts
        shims.ts
        skeleton.ts
        tsconfig.json
      sql2er-agent.mjs
    SKILL.md
sql2er.html
src/
  App.tsx
  attributeLayout.ts
  builder.ts
  codeEditor.tsx
  components/
    icons.tsx
    SwitchControl.tsx
  editor.tsx
  embedded.tsx
  EmbeddedApp.tsx
  exporter.ts
  graph/
    attachEntityDragSync.ts
    autoAvoid.ts
    createERGraph.ts
    entityMoveSync.ts
    forceLoop.ts
    sizeAwareGeometry.ts
    updateGraphStyles.ts
  history.ts
  HistoryOverlay.tsx
  hooks/
    useEmbeddedGraph.ts
    useExportButton.ts
    useGraph.ts
    useSnapshotPersistence.ts
    useUndoRedoShortcuts.ts
    useWheelZoomRotate.ts
  i18n.ts
  landing/
    hero.ts
  language.ts
  layout/
    animation.ts
    arrangeLayout.ts
    attributeRings.ts
    componentSpread.ts
    geometry.ts
    index.ts
    initialLayout.ts
    skeletonLayout.ts
    spatialGrid.ts
    utils.ts
  legendPlacement.ts
  main.tsx
  parser/
    dbml.ts
    sql.ts
  snapshots.ts
  test/
    animation.test.ts
    attachEntityDragSync.test.ts
    autoAvoid.test.ts
    builder.test.ts
    createERGraph.test.ts
    diagnostic-overlays.test.ts
    editor-dblclick.test.ts
    entityMoveSync.test.ts
    exporter-xml.test.ts
    forceLoop.test.ts
    i18n.test.ts
    legendPlacement.test.ts
    parser-dbml-edge.test.ts
    parser-dbml-fixes.test.ts
    parser-dbml.test.ts
    parser-sql-dialects.test.ts
    parser-sql-edge.test.ts
    parser-sql-fixes.test.ts
    parser-sql-issues.test.ts
    parser-sql.test.ts
    perf-layout.test.ts
    session-restore.test.ts
    sizeAwareGeometry.test.ts
    skeletonLayout.test.ts
    snapshot-persistence.test.ts
    snapshots.test.ts
    sql2er-agent-cli.test.ts
    wheelZoomRotate.test.ts
  types.ts
  vite-env.d.ts
tsconfig.json
vite.config.ts

FAQ

sql-to-er is a Claude Code plugin with 1 hand-picked skill for documentation work, indexed on Flowy. Install it with the command on its page. It includes sql2er. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is sql-to-er?: 优雅的在线 SQL / DBML 转 ER 图工具
How do I install sql-to-er?: Run these in Claude Code: npx -y skills add ystemsrx/sql_to_ER --agent claude-code. Then prompt normally.
Does sql-to-er auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is sql-to-er free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.