/插入图表
自然语言出图表
中文描述图表 → LLM 出 Vega-Lite spec → 浏览器交互渲染。
::: /插入图表 引用@销售
柱状图 X 季度 Y 销售
高亮 Q4
:::图表、流程图、插图、可交互 widget 从自然语言描述里直接长出来。一份内容，三种受众：人读、LLM 生成、agent 调用。
Every Folio document ships data-folio-block markers and JSON-LD. Open this page in your favorite AI:
中文描述图表 → LLM 出 Vega-Lite spec → 浏览器交互渲染。
::: /插入图表 引用@销售
柱状图 X 季度 Y 销售
高亮 Q4
:::中文描述流程 → LLM 出 Mermaid 代码 → 浏览器渲染。
::: /插入流程图
用户登录：输入 → 校验 →
成功跳首页 / 失败提示
:::LLM 从 4 个内置 widget（filterable-table / tabs / slider-calc / accordion）选一个 + 填配置。
::: /插入交互 引用@销售
可筛选可排序的销售明细
:::MCP server 一行配置，agent 直接调 folio_build + folio_publish 拿 URL。
{
"mcpServers": {
"folio": {
"command": "npx",
"args": ["@foliolang/cli/folio-mcp"]
}
}
}CLI + 本地 dev server。写 markdown，保存，浏览器自动刷新。
$ folio dev article.md
✓ http://localhost:5173npm install -g @foliolang/cli# 我的文章
::: /插入流程图
登录流程：输入 → 校验 → 成功 / 失败
:::$ folio build article.md
✓ article.html