comark-charts
来自Markdown表的图表，在解析时绘制为SVG，复制为PNG或数据。表格保持在图表下面，所以人们看到图表，代理读取数字。一个 Comark HTML, Vue， React和Svelte插件。
pnpm add comark @comark/html comark-charts
import { createHtmlRenderer } from "@comark/html";
import charts, { components } from "comark-charts/html";
const render = createHtmlRenderer({ plugins: [charts()], components });
::chart{type="line" title="Coffee cups and commits, per month (r = 0.99)"}
| month | coffee cups | commits |
| --- | --: | --: |
| 2026-04 | 820 | 610 |
| 2026-05 | 890 | 640 |
| 2026-06 | 905 | 652 |
::
中间放一张桌子 ::chart 和 ::：一个标题行，然后每个点一行。第一列是x，其他每一列都是一系列数字，由标题命名。
| 道具 | 它是做什么的 |
|---|---|
type | bar， stacked， line， area， scatter， dumbbell， waterfall， pie， gantt,或 sankey。默认的 bar。 |
x | 沿着x轴的列。默认为第一个。 |
y | 要绘制的列，用逗号分隔。默认每列 x。 |
title | 图表的标题，以及屏幕阅读器的名称。 |
labels | 在图表的条形、步骤或圆点上打印数字。没有价值。 |
horizontal | 将条形条侧转，用于文件路径等较长的名称。没有价值。 |
用a标记值 comark-annotate 后表注释： at 按x值和命名行 series 它的列，并且渲染器在条、点或切片周围绘制标记。
:::annotation{at="2026-05" series="commits" mark="circle" color="green"}
The espresso machine arrives.
:::
对于任何其他图表，请键入a Vega-Lite 在表后面指定 vega-lite 块;表格就是它的数据。这个 文档 显示每种类型所期望的表。
插件增加了每一个问题 meta.issues，因此主机可以在发布文档之前拒绝该文档。每个问题都命名了自己的图表，并说明了如何修复它。
如何呈现
弗林特 把桌子变成了Vega-Lite规格的房子主题，然后 维加 在解析时、在服务器上或在构建时将其绘制为SVG，因此浏览器不运行图表代码。 comark-charts/vue， /react, /svelte 放置相同的SVG；标记，由mark-annotate组成，只在 @comark/html。
该页包含一个 figure.cch 将标题、SVG和表格折叠成 数据． 文本、轴和网格遵循next UI或shadcn/ UI的变量和共享 --comark-* 标记，所以图表可以随着页面的暗模式切换。系列带 --comark-chart-1 来 -6，然后是next UI --ui-chart-1 来 -6，然后是shadcn/ui's --chart-1 来 -6． 规则放在 comark CSS层，所以任何简单的规则你自己的胜利；请看图表。” 主题页面。
mark-ui代理技能包括图表；安装时使用 vp dlx skills add onmax/comark-ui，或者将它捆绑到你自己的应用程序中 comark-ui/skills/comark-ui/。 vp 附带 轻快地+;没有它, pnpm dlx 采用相同的参数。