如何动态渲染美人鱼流程图？

文章/答案/技术大牛

发布

5回答

如何安装美人鱼来渲染流程图的减价？

github、markdown、readme、mermaid

我正在尝试使用美人鱼在一个减价文件中呈现流程图。我在我的ReadMe.md存储库中有一个GitHub文件，我想包含一个基本的流程图来帮助描述内容。但我想不出怎样才能让它起作用。是否有人能够就如何呈现一个简单的例子发布一些更具体的说明呢？在这个链接()中，有一个美人鱼安装的示例代码片段： https://unpkg.com/mermaid@7.1.0/dist/我包括了这段代码，然后尝试在下一个代码片段中生成

浏览 1提问于2018-06-08得票数 20

回答已采纳

1回答

javascript、mermaid

我正在使用mermaid库构建流程图。它的工作原理是在一个块中有一个伪代码--具有特殊语法的命令，在此基础上在块中构建流程图。我希望能够动态地更改块的内容，并且脚本每次都会重新构建块图。如何设置初始化？也许我应该在设置中添加一些回调函数？我是这样初始化的： mermaid.init({/*what setting parameters should be here?换句话说，我想在线编辑流程图。

浏览 26提问于2020-12-09得票数 3

1回答

如何将表转换为工作流图？

architecture

我的问题是，如何使用任何编程语言将这些数据转换成流程图。

浏览 0提问于2018-10-02得票数 1

回答已采纳

1回答

如何通过代码创建UML图，以及如何在图中搜索字符？

uml、markdown、dot、program-flow

我想要创建一个程序流程图，但我不想用鼠标绘制它。我可以通过标记或美人鱼绘制一个简单的图表，但它们太简单了。但我想修改更多细节。我不熟悉HTML，我不知道如何处理。我想找一个工具，可以将点语言渲染成html，并能与标记一起工作，如何实现它？或者有更好的选择吗？

浏览 1提问于2019-05-28得票数 0

1回答

Angular2 2/4的流程图/流程图

angular、flowchart、mermaid

我目前正在开发一个应用程序，使用的是带有角度版本4的平均堆栈，我需要创建动态流程图。我希望类似于中可用的内容，它与我的需求完全匹配。它使用的是Flowchart.js和角1.X。而且美人鱼似乎与我的要求相匹配，但曾经支持角1.x。有人能帮我吗？

浏览 5提问于2017-07-10得票数 1

回答已采纳

2回答

如何调整美人鱼节点内的填充？

padding、mermaid

当我创建美人鱼流程图时，文本和节点边框之间的水平填充很大，因此节点看起来不合理地宽。此外，在文本下面有一条奇怪的空行。总而言之，它看起来不是很平衡。出现这种情况的原因是什么，以及如何调整填充(在美人鱼文档中，这样的事情不会发生)。

浏览 36提问于2020-03-21得票数 2

回答已采纳

1回答

美人鱼流程图没有渲染“更长的箭头”

r、r-markdown、rstudio、diagrammer

Setup ```{r} 美人鱼(“ 图TB； a ==> b; b ----> c[apple] ") 由于某种原因，图中的第二条线似乎没有渲染，因为它没有实现“更长的箭头”。有人知道如何解决这个琐碎的问题吗？

浏览 18提问于2021-06-16得票数 1

1回答

美人鱼流程图线型

node.js、flowchart、mermaid

其他应用程序中的流程图线通常都是有角度的，所有的行都是从一个节点到一个节点在开始时在每个基本方向合并的。这是一个常见的问题，这个带有虚拟节点的不能解决它。我希望这可以在带有设置的美人鱼中实现，但我不明白它们的使用。

浏览 6提问于2022-06-08得票数 0

1回答

如何通过美人鱼添加这种类型的节点描述？

mermaid

这是我非常喜欢使用的流程图模式，目前我使用绘制它：注意，流程图中有两种描述 graph TB A --->|"description1:<br>How does A get to

浏览 4提问于2022-02-11得票数 2

回答已采纳

9回答

如何使GitHub页面标记支持美人鱼图？

javascript、jekyll、github-pages、mermaid

我希望在GitHub页面中使用美人鱼，只需简单的提交和推送。换句话说，我希望在我的减价文件中像这样图LRA->C 并在my _layout/post.html上添加一些js，以某种方式将其转换为美人鱼图。在我的帖子中，它被显示为常规代码块，而不是美人鱼图。我尝试了这段代码，在developer视图中连接到network标记中的美人鱼wes，但是美人鱼图仍然不能工作。

浏览 1提问于2018-12-21得票数 14

回答已采纳

1回答

在图中对流程图节点上的事件作出反应-反应？

reactjs、graphviz

我正在尝试几种不同的呈现流程图的方法-- React。到目前为止，我已经让美人鱼和react flow工作了，现在我正在开发graphviz。使用美人鱼，我只需将click {nodeId} handleNodeClick添加到每个节点以获取它来捕获节点单击，而使用ReactFlow流，我可以将onNodeClick = {handleNodeClick我猜想该解决方案包括向每个节点添加onclick属性，作为一个后处理步骤，但我不知道如何在React中这样做。

浏览 17提问于2022-07-28得票数 -1

1回答

“在节点上的点击事件”是否适用于angular中的美人鱼js？

angular、mermaid

我正在尝试集成美人鱼流程图绘制Javascript在我的角度9基于客户端应用程序。我能够绘制流程图，但我确实需要提供特定节点上的点击事件，以及Typescript (组件文件)中定义的函数。有没有人能举例说明如何解决这个问题？

浏览 51提问于2021-01-13得票数 0

3回答

美人鱼CLI -如何转义字符？

diagramming、mermaid

我正在使用美人鱼CLI生成一个流程图()。它工作得很好，但我不知道如何让特殊字符(百分号、圆括号等)在节点中作为文本工作。为了便于说明，以下是美人鱼的示例流程图定义(文件名为example.mermaid)：question1{Gas tank less than 1/8?}action1[Fill tank to 100%]当我在这个文件上运行美人鱼时，我得到了这个错误(它在百分号上放大)： M

浏览 5提问于2015-01-24得票数 22

回答已采纳

1回答

Flowchart.js SVG渲染在弹出窗口中混乱

javascript、svg、rendering、raphael、flowchart

我正在使用库来获得流程图的SVG渲染。我需要将流程图渲染包括在带有动态引导面板的弹出窗口中，但结果是混乱的(框上的标签和小渲染：我的代码是： <divfor true and false in conditionals diagram.drawSVG('diagram'); <&#

浏览 28提问于2018-03-02得票数 5

回答已采纳

1回答

角2-流程图/序列图-库

javascript、svg、angular、flowchart

我有一个与图表创建和渲染相关的具体要求。另一个有趣的特点是:我能把我的连接器分成两部分吗?

浏览 2提问于2016-10-03得票数 2

1回答

呈现几个由javascript添加的人鱼图

javascript、mermaid

我有一个动态网页，可以包含几个美人鱼图表。这些图表作为源代码嵌入到网页中(例如，在<pre>标记中)，然后由美人鱼处理，由实际的图表代替。目前，我有两个问题：它不处理几个图表，只有最后一个被处理。script> <script src="https://cdnjs.clo

浏览 4提问于2022-11-15得票数 0

回答已采纳

2回答

如何在美人鱼流程图节点中对齐文本？

flowchart、mermaid

我想在美人鱼流程图节点中对齐文本，这样Thinkpad和iPad就会对齐。我试图在它们前面插入一个\t，但是它们只是被呈现为文本。

浏览 7提问于2021-09-24得票数 4

1回答

美人鱼-如何为流程图节点设置标签样式

flowchart、mermaid

我需要更改流程图节点的样式。我成功地设置了背景颜色和轮廓：但是，我看不出如何控制标签，例如设置字体颜色、字体系列、粗体、下划线等等

浏览 0提问于2019-07-09得票数 0

3回答

我可以在java中动态引用对象吗？

java、object、dynamic、reference、runtime

在我的示例中，用户绘制一个流程图，并在运行时实例化流程图的每个元素。我可以通过代码确定用户所绘制的内容：谢谢:-)

浏览 7提问于2012-06-17得票数 1

回答已采纳

点击加载更多

如何安装美人鱼来渲染流程图的减价？