问题标签 [mermaid]

我正在寻找图表 Javascript 库来为我的 Angular 项目创建某种顶级动态框图。谁能告诉我美人鱼是否与 Angular 4 兼容？另外请让我知道是否还有其他好的图表库可供使用。谢谢！

我需要在 angular2 中的一个组件中表示一个带有节点和边的简单图。我尝试了以下方法：

在 index.html 中：

在 transfer.component.html 中：

但是图表没有被渲染。我得到以下输出：

美人鱼输出

谁能指出我做错了什么？我已经提到了以下问题：Simple mermaid graph failed and has included the latest mermaid files，但仍然没有得到输出。

• 浏览器：Chrome 版本 61.0.3163.100（官方版本）（64 位）
• 角度版本：@angular/cli：1.3.1 节点：6.11.2 操作系统：linux x64

提前致谢。

I'm just starting with mermaid and created the following chart https://mermaidjs.github.io/mermaid-live-editor/#/view/Z3JhcGggVEQKSSgoSSkpLS0-QTJ7QTJ9CkEyIC0tPiBFKEUpCkEyIC0tPiBBKEEpClRbVF0gLS0-IENbQ10KVCAtLT4gTVtNXQpUIC0tPiBFKEUpClQgLS0-IEQoRCkKVCAtLT4gQQpKKEopIC0tPiBDCkogLS0-IE0KSiAtLT4gQQpKIC0tPiBFClIoUikgLS0-IE0KUiAtLT4gUChQKQpBIC0tPiBJCkEgLS0-IEoKQSAtLT4gUjJbUjJdCkEgLS0-IEMKQSAtLT5NCkUgLS0-IEQKRCAtLT4gQwpSMiAtLT4gUjI

它的代码是

我试图弄清楚我是否做错了什么，或者美人鱼是否无法处理这种复杂的图表。这是一个简化的网络图，从长远来看需要更复杂。如果我将它更改为指向 R 的 R2 它可以工作，这让我认为我没有做错什么，尽管它可能是我遗漏的东西允许这样做。

我有一个 rmarkdown 演示文稿（ioslides），其中包含 3 张幻灯片，其中的流程图在DiagrammeR美人鱼中工作。以下保存为 .Rmd 的文件可以重现该示例（至少在我的机器上，希望你的也是如此）：

运行时，它会生成两个正常大小的图表和一个小的图表。我注意到的事情：

• 被修改的最后一个块（输入或删除的文本，甚至回车），得到正确显示（如果我“触摸”它们的树，通常第一个显示错误）
• cache = FALSE或者cache = TRUE不做任何改变
• 在美人鱼声明的行之间添加换行符（附加）不起作用（此处建议作为解决方案）
• 插入或删除样式声明没有区别
• 使用的浏览器没有区别（最初使用 RStudio 浏览器查看，但如果在 Firefox 中查看，显示同样错误）
• 当演示文稿输出ioslides更改为 时slidy，它可以工作（这是我的替代方案，但如果有解决方案，我更喜欢 ioslides）。

相关部分 或R.Version和Sys.info：

我所期望的：在 ioslides 输出的所有幻灯片中始终显示完整大小且颜色正确的图表的演示文稿。

谢谢

我想在我的春季启动项目中使用美人鱼。

https://mermaidjs.github.io/usage.html

用法说明告诉我使用 yarn add mermaid。谁能解释一下，我必须在我的 spring boot / thymeleaf 项目中配置什么才能在我的前端使用这个依赖项？

谢谢！

除了代码，我在 Markdown 文档中使用 mermaid 进行基本图表渲染。我发现这个在线编辑器在预览时对编辑它很有用。这建议更改主题（默认和森林作品）。

将其复制粘贴到 Markdown 文档中时如何设置主题？

我正在使用来自https://github.com/maximegris/angular-electron的 Electron 中的 Angular2

我已经安装了美人鱼，让它几乎完全按照我的需要工作。我的流程图确实按预期正确显示。

我遇到的唯一问题是点击事件。

（见本页交互部分https://mermaidjs.github.io/flowchart.html）

我需要在美人鱼标记中定义的click A callback位置，A 将被传递给回调。

我遇到的问题是“回调”必须是本机 javascript 函数而不是打字稿函数。我的目标是在我的 ProjectManagementPageConnectionsComponent 中使用“BoxClick”功能。我可以看到在 main.bundle.js 中它被编译为类似于：ProjectManagementPageConnectionsComponent.prototype.BoxClick = function () {

在控制台中调试时，我尝试执行ProjectManagementPageConnectionComponent.BoxClick();，但它说 ProjectManagementPageConnectionComponent 未定义。但在 main.bundle.js 中，它看起来像是已定义的。那么上面是否有我缺少的父命名空间？因为我很确定我是否可以让这个函数在控制台中工作，那么我也可以在我的美人鱼标记中调用那个函数。

最后，我希望从那里进行导航。现在根据美人鱼文档文档，我可以定义一个 URL。我已经做到了，而且确实有效；但是，它会在新窗口中打开。我希望它在同一个窗口中导航，它似乎唯一的方法是使用一个函数。但是函数的命名空间似乎无法访问。

我们正在尝试使用Mermaid Preview Plugin在美人鱼中生成甘特图。但是当我们尝试预览时，我们会得到这样的预览。

但是当我们尝试使用美人鱼实时编辑器美人鱼实时编辑器时使用相同的代码，我们得到了更清晰的图片，日期显示正确

我们如何更新 Visual Studio 代码设置应该更正日期和更易读的甘特图

我正在尝试绘制一个简单的图表DiagrammeR::mermaid，应该如下所示：

显然（或不是）-->A并且B-->代码不起作用。箭不可能从无处飞来或飞来。

是否有一个简单的解决方法（空白节点？/不可见节点？）

我在降价中使用美人鱼。我不知道如何连接子图。

鉴于下面的程序，我需要能够用箭头连接一个和两个。