问题标签 [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 回答
455 浏览

r - Meta分析流程图

是否可以使用任何 R 工具重现如下图所示的元分析类型的流程图? 在此处输入图像描述

我的尝试是使用mermaid

这产生了:

在此处输入图像描述

但是我找不到跨子图连接节点的方法。

还有其他工具更适合这种工作吗?我正在考虑可以在我的 Rmarkdown 文档中使用的任何包。

0 投票
0 回答
335 浏览

javascript - Mermaid JS 将链接从最右边到最左边

使用 Mermaid js 制作流程图,似乎无法找到一种方法将链接环绕到新的“行”,可以这么说。文档和谷歌搜索没有让我到任何地方。有谁知道是否可以创建一个链接来替换红线?

在此处输入图像描述

0 投票
9 回答
10065 浏览

javascript - 如何让 GitHub Pages Markdown 支持美人鱼图?

我希望通过简单的提交和推送在 GitHub 页面中使用美人鱼。

换句话说,我希望像这样写入我的降价文件

并在我的 _layouts/post.html 上添加一些 js,以某种方式将其转换为美人鱼图。

我发现这个主题声称它支持这样的事情。但是这个主题对我来说太重了,js太多了,所以我以为我只能使用这个文件,这很简单

在我的_include/mermaid.html中,我换成{{ _sources.mermaid }}了美人鱼cdn

它仍然无法正常工作。在我的帖子中,它显示为常规代码块,而不是美人鱼图。

编辑:在 chrome 开发人员看来,我没有看到与 link 建立的任何连接https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

我尝试了这段代码,network在开发人员视图中的标签中建立了与美人鱼的连接,但美人鱼图仍然不起作用

0 投票
1 回答
3330 浏览

markdown - 美人鱼的空间

我保存了一个 .md 文件,我正在使用 Atom 和 Mermaid Preview 包查看它。我将在他们的 GitHub 页面上关闭示例:

这很好,但是如何在文本中添加空格?例如:

当我输入空格时,预览器变为空白。我尝试添加引号,但这没有帮助。

0 投票
1 回答
2390 浏览

r - 美人鱼中的线路连接(而不是箭头)

我正在尝试在 R 中创建一个美人鱼图表。语法似乎很简单 - 但是我还没有找到在没有箭头的情况下在两个形状之间建立线连接的可能性。

在这个例子中:

会得到 在此处输入图像描述

在这里,“形状一”和“这不可能是形状”之间的连接是一条线,但是一旦我尝试在两个形状之间使用这种连接,输出就不会构建图表。有没有办法实现两个形状之间的线连接?

0 投票
1 回答
1777 浏览

html - 我无法在 gitlab 的 wiki 功能中向美人鱼流程图添加超链接

我想将我的流程图用作目录,它还以时间顺序模糊地表示并行事件的进展及其相互关系。

我知道使用降价创建这些图表。通过为“B”节点添加“单击”行,当悬停在节点上时,我可以看到我的光标发生了变化,就好像它是一个链接一样,但是任何选择它的尝试都不起作用。

这是 Gitlab 本身的限制吗?

0 投票
0 回答
735 浏览

html - 我是否能够以某种方式在 markdown 中的美人鱼流程图上使用 css(或更具体地说是放大)?

我试过这样使用 div 标签: <div style="width:300px; height:300px">包含美人鱼图表的“```”引号,但没有任何反应。我基本上是在尝试根据这篇文章https://github.com/knsv/mermaid/issues/535的解决方案在图表上使用 css,但我假设他们的图表不是通过降价实现的。

我也在尝试通过 gitlab 的 wiki 功能来做到这一点。

0 投票
1 回答
1836 浏览

css - 美人鱼改变节点/选项的位置无论如何都要固定节点的位置

我正在尝试用 html 绘制流程图。

流程必须配置如下。

在此处输入图像描述

我已经像这样在美人鱼中尝试过

结果如下图所示。

在此处输入图像描述

请我想固定从 A 到 G 水平度的位置

我尝试使用 CSS 位置,但从未成功。还尝试通过jquery对其进行动画处理,但从未奏效。

请让我知道修复这些节点的任何方法或其他很棒的库。

谢谢。

0 投票
1 回答
149 浏览

gitlab - 如何添加空间来阻止标题?

是否可以在美人鱼流程图生成中的块标题中的单词之间添加空格?

基本上我需要类似的东西: SearchService-->items details 但是在尝试时我得到一个错误和空白流程图。

与此问题有关:未回答的美人鱼中的空间。

0 投票
1 回答
1721 浏览

gantt-chart - 在 DyagrammeR>mermaid>甘特图中更改字体和时间轴标签

我使用diagrammer::mermaid(下面的可重现代码)在 R 中制作了这个甘特图:

在此处输入图像描述

这很好,但我想:

  1. 增加字体大小(我想这会使每一行更宽,使当前非常长的矩形稍微“方形”。我很好)
  2. 使 t-aixis 标签更加标准。有些人的几周,有些人的几个月似乎很奇怪。我希望能够以简洁的方式区分月份和年份)

如何实施这些更改?

我是一个 R 用户,对 node.js、css 等一无所知。我设法在互联网上找到了代码片段来创建它,但style_widget对它或如何更改它一无所知。