@diagrammo/dgmo
简单文字入. 精彩的图表出来.
写入纯文本 .dgmo 文档,获取干净、可主题图表。 一种标记语言, 50+图表类型 ——流程图,序列图,ER,Org图表,C4,Gantt,地图,栏/行/皮等更多.
医生 • 妇女 语言参考 • 妇女 桌面应用程序 • 妇女 QQ 现场编辑器
sequence Boarding the Marauder
Quartermaster -Hoist the colors-> Crew
Crew -Aye, captain-> Bosun
Bosun -Heading 270-> Helm
Helm -On course-> Quartermaster
这是一个完整的图表。 没有坐标,没有XML,没有拖放——只是文本,你可以像其他源文件一样去diff,审查,和版本.
作者: 视觉
想要比文本文件更丰富的编辑经验吗? 这个 图表桌面应用 (本地macOS,离线,自动更新) 在线编辑器 (任何浏览器,没有安装)将 DGMO 变成一个完整的作者环境:
- 现场预览 ——您输入的图表重绘
- 智能编辑 语法突出显示、自动完成和可选 vim 密钥绑定
- 7个可主题调色板,每个带有光 / 暗 / 透明变体
- 一击导出 到 PNG 或 SVG, 加上即时共享链接
- 当地第一 -
.dgmo文件在磁盘上是纯文本, 完全脱机工作, 永远不要像导出图像那样僵化
因为每个图都只是文字, 它生活在git, diffs干净的公关 AI 工具,或任何网页.
开始于 图表.app
安装
# 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。 。 。 .
国 际
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 :
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 子路径 —— 完整的地表和稳定性合同见文件.
投入任何网页
添加一个 <script> 标签和每个 <pre class="dgmo"> 块在负载时制作 :
<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> 从同一包中:
<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/嵌入。 。 。 .
使用文件框架? 头等舱插件包此全部 :
remark-dgmo • 妇女 astro-dgmo • 妇女 docusaurus-plugin-dgmo • 妇女 fumadocs-dgmo • 妇女 nextra-dgmo • 妇女 vitepress-dgmo
使用您的 AI 工具
Claude, Cursor, Codex等特工可以直接编写并渲染出DGMO. 一个命令设置每个助理——没有第二个软件包,没有提示:
dgmo install
它自动检测克洛德代码, Codex,克洛德桌面,克洛德光标,Windsurf, 以及Copilot和电线每个给被捆绑的MCP服务器. 更多内容: 图表.app/ai。 。 。 .
图表类型
数据图表 · 横线 · 区域 · 馅饼 · 甜甜圈 · 雷达 · 极地-区域 · 横线 · 多线 · 散行 · 热图 · 漏斗 · 桑基 · 和弦
可视化 平面 平面 平面 平面 平面
图表 - 序列-流程图-类别- r- org- c4- 状态- 下- kanban- sitemap- mindmap- gant- pert- 出行- 出行- 箱行- 线框- raci- rasci- daci
Beta — 期望粗略边缘和语法变化 : 页:1, (中文(简体) ), 阴道, (中文(简体) ), 白板。 。 。 . dgmo types 也标记他们.
每个图表类型 被分类为活例 图表.应用/参考。 。 。 .
每个类型完整的语法、指令和选项都生活在 语言参考 ——权威谱.
调色板主题( T)
内置调色板,每个调色板有光,暗,透明等变体:
slate (默认) atlas • 妇女 blueprint • 妇女 tidewater • 妇女 nord • 妇女 catppuccin • 妇女 tokyo-night
自己注册 registerPalette()颜色助手( C)getPalette, (中文(简体) ), tint, (中文(简体) ), mute, (中文(简体) ), contrastText,.)和"美人鱼"主题可变一代飞船从包裹中也——见: 文档。 。 。 .
编辑器支持
语法突出显示和自动完成 .dgmo 将文件作为现用导出 :
@diagrammo/dgmo/highlight——独立突出显示器@diagrammo/dgmo/editor— CodeMiror 6 语言支持
开发
pnpm install
pnpm build # tsup → dist/ (ESM + CJS + CLI)
pnpm test # vitest
pnpm typecheck
许可证
麻省理工学院