代码与图表

代码块，以及用代码块语言渲染出来的图。总览见 Markdown。

带 DSL 标记的图，可以在编辑器附件菜单的 图表编辑器 里改和预览，见 DSL 图表。需要先在 设置 → 偏好设置 打开图表编辑器。

代码块

三个反引号或三个波浪号围住，第一行可以写语言名以高亮。

```javascript
console.log('hello');
```

代码块里面还要再放一层代码块时，外层多写一个反引号：

````markdown
```python
print(3)
```
````

Mermaid

语言写 mermaid。cflow 特供，可在图表编辑器中修改。

```mermaid
flowchart LR
  A[开始] --> B[结束]
```

语言写成 mermaid_ascii 时，输出字符风格的图。不能导出 SVG，中文可能错位。

ECharts

语言写 echarts 或 echart，内容是 ECharts 配置，用 JSON 书写，也支持 JSON5。不要再包一层多余外壳。cflow 特供，可在图表编辑器中修改。

```echarts
{
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [3, 8, 5] }]
}
```

信息图

语言写 infographic 或 info，正文是信息图 DSL。cflow 特供，可在图表编辑器中修改；代码为空时可以点 填充示例。

```infographic
infographic compare-quadrant-quarter-circular
data
  title 风险控制
  desc 风险频率与损失程度分析
  compares
    - label 高损高频
      desc 直接规避风险
      icon mingcute/currency-bitcoin-2-fill
      illus notify
    - label 低损高频
      desc 采取风险控制措施
      icon mingcute/currency-bitcoin-fill
      illus coffee
    - label 高损低频
      desc 通过保险转移风险
      icon mingcute/dogecoin-doge-fill
      illus diary
    - label 低损低频
      desc 选择接受风险
      icon mingcute/exchange-bitcoin-fill
      illus invest
theme light
  palette antv
```

其他 DSL 图表

把语言设成对应名字，正文按该语言书写。cflow 特供，可在图表编辑器中修改。

```plantuml
@startuml
Alice -> Bob: hello
@enduml
```

支持的语言：

plantuml / puml、graphviz / dot、d2、structurizr、dbml、vega、vegalite、wavedrom、blockdiag、seqdiag、actdiag、nwdiag、packetdiag、rackdiag、erd、ditaa、nomnoml、c4plantuml、pikchr、svgbob、bytefield、symbolator、umlet、wireviz、goat。

HTML 代码块

语言写 __html，内容按 HTML 显示。cflow 特供。脚本等危险标签会被去掉。

```__html
<p style="color:#2563EB">自定义 HTML</p>
```

iframe 只允许这些站点（含子域名）：

• 播放器：Bilibili、优酷、腾讯视频、爱奇艺、YouTube
• 社交：Twitter / X、Instagram
• 地图：Google Maps、百度地图、高德地图
• 其他：GitHub Gist、Figma、Excalidraw、Wolfram