@djangocfg/ widget-diagram (英语)
人造人造人造人造人造人图,既分出一半:输入了WRITE源代码,又输入了A
完全 Parser 渲染器 DRAWS 它。 支持构建者覆盖的图表类型(FlowDiagram, (中文(简体) ),
SequenceDiagram, (中文(简体) ), JourneyDiagram再加上其他的美人鱼,
班级、州级、ER级、派级、心智图级,......) chart 道具 (英语). 点击全屏
通过浮动工具栏.
安装
pnpm add @djangocfg/widget-diagram @djangocfg/ui-core
哪个渲染器
@djangocfg/widget-media/diagram 是另一个,它不是重复.
widget-diagram | widget-media/diagram | |
|---|---|---|
| 解析器 | mermaid, ~84 MB 无包装 | beautiful-mermaid, ~2 MB 键 |
| 封面 | 一切美人鱼解剖 | 流程图、序列、状态、类别、ER-来源 |
| 对于 | 一个工作就是图的表面 | 聊天记录, 大多数信件没有 |
不要将两者导入到一个应用程序中.
没有渲染器的构建器
import { FlowDiagram } from '@djangocfg/widget-diagram/builders';
这个 ./builders 子路径没有静态边缘到解析器,所以服务器通过,
测试或CLI可以不溶解渲染器而写出图源.
src/entries.test.ts 拿着这个.
校验
pnpm --filter @djangocfg/widget-diagram check-types test
import Mermaid from '@djangocfg/widget-diagram';
<Mermaid chart={`
flowchart LR
A[Client] --> B[API] --> C[(DB)]
`} />
构建器 API :
import Mermaid, { FlowDiagram } from '@djangocfg/widget-diagram';
const chart = new FlowDiagram({ direction: 'LR' })
.node('a', 'Client')
.node('b', 'API')
.edge('a', 'b')
.build();
<Mermaid chart={chart} />
道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
chart | string | —— 说 | 美人鱼源. |
isCompact | boolean | false | 对嵌入式上下文进行更紧的粘贴. |
fullscreen | boolean | true | 通过浮动工具栏单击至全屏. |
scrollIsolation | boolean | false | 盘旋时锁定页面轮. 默认关闭——美人鱼SVG不滚动,覆被只是偷取了轮子事件. |
debounceMs | number | 300 | 于 chart 变化。 静态图较低,流出时较高. |
className | string | —— 说 | —— 说 |
页:1
- ~ 800KB 捆绑 ——进入点已经
lazy()- 包着一个Suspense旋转器,所以成本只有在一个图实际挂起时才支付. - 他们从
useThemePalette编号 :useStylePresets编号 :useBoxColors(与构建者一起导出) — 美人鱼颜色遵循活性应用主题; 不使用硬码十六进制.
改编自jalcoui(麻省理工学院).