# @diagrammo/dgmo 中文文档

规范地址：https://npmcn.com/package/%40diagrammo/dgmo/

版本：0\.98\.0
npm 元数据更新时间：2026-11-08T23:44:21.978Z
中文译文更新时间：2026-11-12T12:40:51.199Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40diagrammo/dgmo
原文对照：https://npmcn.com/package/%40diagrammo/dgmo/?lang=original
项目主页：https://github.com/diagrammo/dgmo#readme
源码仓库：https://github.com/diagrammo/dgmo

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：6.7 MB，459 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.6
- 运行依赖：12 个
- peer 依赖：@lezer/lr ^1\.4\.8，@lezer/common ^1\.5\.1，@lezer/highlight ^1\.2\.3，@codemirror/language ^6\.12\.3
- 首次发布：2026-02-07T22:30:10.937Z
- 最新版本发布：2026-11-08T23:44:21.635Z
- 近 30 天下载量：2515（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：207（近 12 个月 207 个）

## 中文简介

DGMO 图表标记语言——解析器、渲染器和颜色系统

## 安装

```sh
npm install @diagrammo/dgmo
```

也可以使用：`pnpm add @diagrammo/dgmo`、`yarn add @diagrammo/dgmo`、`bun add @diagrammo/dgmo`

## README

# `@diagrammo/dgmo`

### 简单文字入. 精彩的图表出来.

写入纯文本 `.dgmo` 文档,获取干净、可主题图表。 一种标记语言, **50+图表类型** ——流程图,序列图,ER,Org图表,C4,Gantt,地图,栏/行/皮等更多.

[![npm](https://img.shields.io/npm/v/@diagrammo/dgmo?color=2e7d32&label=npm)](https://www.npmjs.com/package/@diagrammo/dgmo) [![npm downloads](https://img.shields.io/npm/dm/@diagrammo/dgmo?color=blue)](https://www.npmjs.com/package/@diagrammo/dgmo) [![license](https://img.shields.io/npm/l/@diagrammo/dgmo)](https://npmcn.com/package/%40diagrammo/dgmo/LICENSE)

**[医生](https://diagrammo.app/start) • 妇女 [语言参考](https://diagrammo.app/reference) • 妇女 [桌面应用程序](https://diagrammo.app/app) • 妇女 [QQ 现场编辑器](https://online.diagrammo.app/)**

[![Typing a DGMO sequence diagram and watching it render live](https://diagrammo.app/readme/sequence.gif)](https://online.diagrammo.app/)

* * *

```
sequence Boarding the Marauder

Quartermaster -Hoist the colors-> Crew
Crew -Aye, captain-> Bosun
Bosun -Heading 270-> Helm
Helm -On course-> Quartermaster
```

这是一个完整的图表。 没有坐标,没有XML,没有拖放——只是文本,你可以像其他源文件一样去diff,审查,和版本.

## 作者: 视觉

想要比文本文件更丰富的编辑经验吗? 这个 **[图表桌面应用](https://diagrammo.app/app)** (本地macOS,离线,自动更新) **[在线编辑器](https://online.diagrammo.app/)** (任何浏览器,没有安装)将 DGMO 变成一个完整的作者环境:

-   **现场预览** ——您输入的图表重绘
-   **智能编辑** 语法突出显示、自动完成和可选 vim 密钥绑定
-   **7个可主题调色板**,每个带有光 / 暗 / 透明变体
-   **一击导出** 到 PNG 或 SVG, 加上即时共享链接
-   **当地第一** -  `.dgmo` 文件在磁盘上是纯文本, 完全脱机工作, 永远不要像导出图像那样僵化

因为每个图都只是文字, 它生活在git, diffs干净的公关 [AI 工具](https://diagrammo.app/ai),或任何网页.

开始于 **[图表.app](https://diagrammo.app/)**

## 安装

```bash
# Library
npm install @diagrammo/dgmo

# CLI (macOS and Linux)
npm install -g @diagrammo/dgmo-cli

# CLI (no install)
npx @diagrammo/dgmo-cli diagram.dgmo
```

CLI的Homebrew和Arch/Omarchy(帕克曼)装置列于 [图表.app/dev](https://diagrammo.app/dev#cli)。 。 。 .

## 国 际

```bash
dgmo                                   # creates a sample.dgmo to get you started
dgmo diagram.dgmo                      # → diagram.png
dgmo diagram.dgmo -o out.svg           # → SVG (format from extension)
cat diagram.dgmo | dgmo > out.png      # pipe in, PNG to stdout
dgmo diagram.dgmo --theme dark --palette catppuccin
```

| 旗帜 | 数值 | 默认 |
| --- | --- | --- |
| `--theme` | `light`, (中文(简体) ), `dark`, (中文(简体) ), `transparent` | `light` |
| `--palette` | 7个调色板之一(见下文) | `slate` |
| `-o` | 输出路径( e)`.svg` • SVG,其他巴布亚新几内亚) | `<input>.png` |

## 图书馆

将任意图绘制到 SVG 字符串中—— 没有浏览器, 没有可见的 DOM :

```typescript
import { render } from '@diagrammo/dgmo';

const { svg } = await render(
  `
bar Revenue by Quarter
Q1 12
Q2 19
Q3 15
Q4 22
`,
  { theme: 'light', palette: 'slate' }
);
```

`render()` 自动检测图表类型并发送到右引擎。 需要下级解析器、配置器和每型渲染器吗? 他们生活在 [`@diagrammo/dgmo/advanced`](https://diagrammo.app/dev) 子路径 —— 完整的地表和稳定性合同见文件.

## 投入任何网页

添加一个 `<script>` 标签和每个 `<pre class="dgmo">` 块在负载时制作 :

```html
<script src="https://cdn.jsdelivr.net/npm/@diagrammo/dgmo-standalone/dist/auto.js"></script>

<pre class="dgmo">
pie Crew Rations
Grog: 58
Hardtack: 21
Limes: 21</pre
>
```

偏爱明确的内容? 使用 `<dgmo-diagram>` 从同一包中:

```html
<script src="https://cdn.jsdelivr.net/npm/@diagrammo/dgmo-standalone/dist/element.js"></script>

<dgmo-diagram palette="slate"
  >pie Crew Rations Grog: 58 Hardtack: 21 Limes: 21</dgmo-diagram
>
```

主题检测,复制按钮,"打开编辑器"免费来取. 完整配置,框架配方(Astro, Docuraurus, Hugo, MkDocs),自我托管,以及CSP指导: **[图表.app/嵌入](https://diagrammo.app/embed)**。 。 。 .

使用文件框架? 头等舱插件包此全部 : [`remark-dgmo`](https://www.npmjs.com/package/remark-dgmo) • 妇女 [`astro-dgmo`](https://www.npmjs.com/package/astro-dgmo) • 妇女 [`docusaurus-plugin-dgmo`](https://www.npmjs.com/package/docusaurus-plugin-dgmo) • 妇女 [`fumadocs-dgmo`](https://www.npmjs.com/package/fumadocs-dgmo) • 妇女 [`nextra-dgmo`](https://www.npmjs.com/package/nextra-dgmo) • 妇女 [`vitepress-dgmo`](https://www.npmjs.com/package/vitepress-dgmo)

## 使用您的 AI 工具

Claude, Cursor, Codex等特工可以直接编写并渲染出DGMO. 一个命令设置每个助理——没有第二个软件包,没有提示:

```bash
dgmo install
```

它自动检测克洛德代码, Codex,克洛德桌面,克洛德光标,Windsurf, 以及Copilot和电线每个给被捆绑的MCP服务器. 更多内容: **[图表.app/ai](https://diagrammo.app/ai)**。 。 。 .

## 图表类型

**数据图表** · 横线 · 区域 · 馅饼 · 甜甜圈 · 雷达 · 极地-区域 · 横线 · 多线 · 散行 · 热图 · 漏斗 · 桑基 · 和弦

**可视化** 平面 平面 平面 平面 平面

**图表** - 序列-流程图-类别- r- org- c4- 状态- 下- kanban- sitemap- mindmap- gant- pert- 出行- 出行- 箱行- 线框- raci- rasci- daci

_Beta — 期望粗略边缘和语法变化 : **页:1**, (中文(简体) ), **阴道**, (中文(简体) ), **白板**。 。 。 . `dgmo types` 也标记他们._

**每个图表类型** 被分类为活例 **[图表.应用/参考](https://diagrammo.app/reference)**。 。 。 .

每个类型完整的语法、指令和选项都生活在 **[语言参考](https://diagrammo.app/reference)** ——权威谱.

## 调色板主题( T)

内置调色板,每个调色板有光,暗,透明等变体:

`slate` (默认) `atlas` • 妇女 `blueprint` • 妇女 `tidewater` • 妇女 `nord` • 妇女 `catppuccin` • 妇女 `tokyo-night`

自己注册 `registerPalette()`颜色助手( C)`getPalette`, (中文(简体) ), `tint`, (中文(简体) ), `mute`, (中文(简体) ), `contrastText`,.)和"美人鱼"主题可变一代飞船从包裹中也——见: [文档](https://diagrammo.app/dev)。 。 。 .

## 编辑器支持

语法突出显示和自动完成 `.dgmo` 将文件作为现用导出 :

-   `@diagrammo/dgmo/highlight` ——独立突出显示器
-   `@diagrammo/dgmo/editor` — CodeMiror 6 语言支持

都回来 [桌面应用程序](https://diagrammo.app/app) 编辑 [现场编辑器](https://online.diagrammo.app/)。 。 。 .

## 开发

```bash
pnpm install
pnpm build        # tsup → dist/ (ESM + CJS + CLI)
pnpm test         # vitest
pnpm typecheck
```

## 许可证

麻省理工学院

## 常见问题

### @diagrammo/dgmo 是什么？

DGMO 图表标记语言——解析器、渲染器和颜色系统

### 如何安装 @diagrammo/dgmo？

在项目目录运行 npm install @diagrammo/dgmo，或使用 pnpm add / yarn add / bun add。

### @diagrammo/dgmo 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @diagrammo/dgmo 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @diagrammo/dgmo 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.6。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @diagrammo/dgmo 可以商用吗？

@diagrammo/dgmo 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @diagrammo/dgmo 的下载量有多少？

根据 npm 官方下载统计，@diagrammo/dgmo 在 2026/10/12 – 2026/11/10 这 30 天内被下载 2,515 次，日均约 84 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @diagrammo/dgmo 还在维护吗？

最新版本 0\.98\.0 发布于 2026/11/09（3 天前）；至今共发布 207 个版本，其中过去 12 个月发布了 207 个；首次发布于 2026/02/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。