问题标签 [mermaid]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1039 浏览

javascript - 超出图表中的最大文本大小

我正在使用美人鱼 8.5.0 生成流程图,但收到错误消息图中的最大文本大小已超出。

将 MD 保存为文本文档,文档大小为 60kb。

所以想知道是否有任何配置可以允许接受更大的 md 文本?

如果降价有任何硬性限制,那么它是什么?

0 投票
2 回答
824 浏览

azure-devops - Azure DevOps wiki 中带有滚动条的美人鱼图

我正在 Azure Devops wiki 中创建一个大序列图,一旦 Mermaid 图中的节点和交互数量增加,查看起来就会变得困难。有没有可能用滚动条来固定图表的大小?

0 投票
0 回答
112 浏览

reactjs - 美人鱼类图的自定义箭头

我需要在反应应用程序中使用美人鱼制作的 UML 图有一个“包含”(又名锚点)图标。我在文档中找不到直接的解决方案。

有没有办法配置这个?

我要复制的锚图标连接示例

0 投票
2 回答
760 浏览

azure-devops - Azure 中的 Mermaid JS 语法损坏?

我正在使用 Azure Devops 环境的 Wiki 功能(项目 -> 概述 -> Wiki)为我正在处理的项目制作一些数据和代码的流程图。wiki 编辑器有一个按钮来创建一个简单的美人鱼图。我正在使用该功能来创建我们项目的图表。当我为数据库样式节点执行示例代码时:

Azure devops 返回以下错误:

我用谷歌搜索了这个错误,这里建议问题是由于旧版本的美人鱼造成的。有谁知道解决方法或旧文档?

0 投票
1 回答
786 浏览

mkdocs - 如何同时使用 codehilite 和美人鱼?

我们使用带有材料主题的 mkdocs 生成文档,直到现在一直使用 codehilite 扩展。我现在使用此处描述的方法添加了美人鱼:https ://github.com/squidfunk/mkdocs-material/issues/693

首先,我的降价:

我的 mkdocs.yml:

在此配置中,美人鱼代码不会呈现为图表,但代码会突出显示语法。

密码学

如果我扩展我的 mkdocs.yml 以添加这样的美人鱼:

然后美人鱼图正确呈现,但代码未突出显示语法。

美人鱼

如果我更改降价以将语言添加到代码块

然后代码和图表都正确呈现。我遇到的问题是现有文档没有指定语言,直到现在它才有效。

任何想法如何让这两个扩展更好地协同工作?还是我只需要告诉开发人员更新他们的降价?

0 投票
2 回答
904 浏览

azure-devops - Azure DevOps Mermaid 标签未居中

问题

是否可以更改我的 Azure DevOps wiki 的 Mermaid 配置?或者有没有其他方法可以让我在我的 wiki 上获得我想要的结果?

期望的结果:

VS 代码渲染

细节

使用 Azure DevOps wiki 中的 Mermaid markdown,节点中的标签未居中对齐。

示例降价

结果流程图:

Azure DevOps Wiki 渲染

我在美人鱼 github 上发现了这个问题:

在禁用“htmlLabels”的情况下,流程图中的标签文本未水平居中 #1177

该问题提到,如果flowchart配置具有htmlLables: true.

我在 Azure DevOps wiki 上找不到更改美人鱼配置的位置。我已经在站点周围挖掘并尝试克隆 wiki,但找不到任何包含美人鱼配置的文件或页面。

0 投票
2 回答
5568 浏览

mermaid - 如何更改 mermaid.js 甘特图中的字体/颜色

我最近发现了 mermaid.js,它非常适合设计图表和甘特图。我正在使用实时编辑器(https://mermaid-js.github.io/mermaid-live-editor/),这很容易。但是我怎样才能简单地更改文本字体及其大小,编辑器中任务的颜色?我已经读过可以更改css属性,但这对我来说并不清楚,我需要更多解释。非常感谢

0 投票
1 回答
249 浏览

svelte - 在苗条上安装美人鱼

我正在尝试使用 Svelte 安装美人鱼来制作图表。所以我做了以下事情:

npm install mermaid

然后我得到以下信息:

然后当我尝试运行我的服务器时,我得到:

谁能告诉我发生了什么以及如何解决这个问题?谢谢!

0 投票
0 回答
438 浏览

r - 创建带有侧向箭头的美人鱼图

我有一个我在 grViz 中构建的图表,如下所示:

在此处输入图像描述

我想在美人鱼中构建相同的图,但如果没有具有可见边界的子图,我似乎无法找到在 TD 图中制作侧向节点的方法

有任何想法吗?

0 投票
3 回答
3891 浏览

gitlab - 如何在 Gitlab Markdown 中指定 Mermaid 配置?

在 Gitlab 中,我已经能够在此处指定的 Markdown 文件中呈现带有美人鱼的实体关系图。

这是我使用的 Markdown:

美人鱼交互式编辑器提供了一个配置示例:

但我不知道在哪里可以找到该配置信息。我已经尝试将它放在同一个目录中,在一个名为config.jsonor的文件中mermaid-config.json,但这些都没有奏效。我还尝试将它包含在定义图表的 Markdown 中,这只会导致它渲染不正确。有没有办法为 Gitlab 指定主题或其他 CSS 元素?