@avol-io/反应-雇佣军
反应组件 美人鱼 带有缩放,平板,方向控制,全屏,下载,和 draw.io 集成的图.
安装
npm install @avol-io/react-mermaid
同伴依赖关系
npm install react react-dom mermaid react-zoom-pan-pinch
| 软件包 | 需要的版本 |
|---|---|
react | >=19 |
react-dom | >=19 |
mermaid | >=11 |
react-zoom-pan-pinch | >=3 |
使用量
import { MermaidDiagram } from '@avol-io/react-mermaid'
export function App() {
return (
<MermaidDiagram
chart={`
graph TD
A[Start] --> B{Decision}
B -- Yes --> C[Done]
B -- No --> D[Skip]
`}
width="100%"
height="400px"
/>
)
}
API 密码
美人鱼地图
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
chart | string | 所需经费 | 美人鱼源文本 |
width | string | "100%" | CSS 容器宽度 |
height | string | "400px" | CSS 容器高度 |
config | MermaidConfig | —— 说 | 转交给 mermaid.initialize() |
enableDownloadSvg | boolean | true | 在下载时显示“ SVG” 选项 |
enableDownloadMmd | boolean | true | 在下载下拉时显示“.mmd”选项 |
enableDrawio | boolean | true | 在工具栏中显示“ 打开 Draw.io ” 按钮 |
当两者
enableDownloadSvg财务报告和审定财务报表enableDownloadMmd为:false,下载 完全不提供下拉按钮 .
模式
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
title | string | "Error" | 模式方向 |
onClose | () => void | 所需经费 | 使用 Escape 调用、 覆盖点击或关闭按钮 |
children | ReactNode | 所需经费 | 模块体含量 |
工具栏
右上边
- 下载 - 与SVG和
.mmd选项(通过道具可独立切换) - 以 Draw.io 打开 - 打开 app.diagrams.net (英语) 通过美人鱼导入 URL 预装图表
- 全屏 切换固定的全屏覆盖
右下( 3×3 格)
- 箭头按钮 - 将图表填入所有四个方向
- 居中按钮 ——重排视图以适应容器中的内容
- 缩小/ 缩小 步骤缩放( 轮子缩放也支持, 沿着光标)
样式
不需要 CSS 导入 。 第一次制作时 <style id="avol-react-mermaid-styles"> 标记被注入
输入 <head> 一次并被所有实例重复使用.
所有颜色和大小都暴露为 CSS 自定义属性覆盖它们 :root (单位:千美元)
全球主题,或用于逐一设定主题的容器类别的范围:
/* dark theme example */
:root {
--mermaid-bg: #1f2937;
--mermaid-border-color: #374151;
--mermaid-toolbar-bg: rgba(17, 24, 39, 0.9);
--mermaid-toolbar-color: #f9fafb;
--mermaid-toolbar-hover-bg: #111827;
--mermaid-toolbar-border: #4b5563;
--mermaid-fullscreen-bg: #111827;
--mermaid-dropdown-bg: #1f2937;
--mermaid-dropdown-item-color: #f3f4f6;
--mermaid-dropdown-item-hover: #374151;
}
可用的令牌
| 脚本 | 默认 | 控件 |
|---|---|---|
--mermaid-bg | transparent | 容器背景 |
--mermaid-border-color | rgba(0,0,0,0.12) | 容器边框颜色 |
--mermaid-border-radius | 8px | 容器角半径 |
--mermaid-toolbar-bg | rgba(255,255,255,0.9) | 按钮背景 |
--mermaid-toolbar-border | rgba(0,0,0,0.12) | 按钮边框 |
--mermaid-toolbar-color | #374151 | 按钮图标/文本颜色 |
--mermaid-toolbar-hover-bg | #ffffff | 按钮徘徊背景 |
--mermaid-toolbar-hover-shadow | 0 2px 8px rgba(0,0,0,0.1) | 按钮徘徊阴影 |
--mermaid-toolbar-focus-ring | #01696f | 焦点大纲颜色 |
--mermaid-toolbar-btn-size | 30px | 按钮宽度和高度 |
--mermaid-toolbar-btn-radius | 6px | 按钮角半径 |
--mermaid-dropdown-bg | #ffffff | 下拉面板背景 |
--mermaid-dropdown-border | rgba(0,0,0,0.1) | 下拉边框 |
--mermaid-dropdown-shadow | 0 4px 12px rgba(0,0,0,0.12) | 放下阴影 |
--mermaid-dropdown-item-hover | #f3f4f6 | 空降项目徘徊背景 |
--mermaid-dropdown-item-color | #374151 | 下拉项目文本颜色 |
--mermaid-error-bg | #fef2f2 | 错误横幅背景 |
--mermaid-error-border | #fecaca | 错误横幅边框 |
--mermaid-error-color | #dc2626 | 错误的横幅文字 |
--mermaid-fullscreen-bg | #ffffff | 全屏覆盖背景 |
--mermaid-fullscreen-zindex | 9998 | 全屏幕 z 索引 |
实时文件
https://www.avol.io/resact-mermaid/ 页面存档备份,存于互联网档案馆
许可证
麻省理工学院 页:1