标签: mermaid

graph LR
A-->B-->C-->D-->E-->F;

graph TD
A-->B-->C-->D-->E-->F;

我喜欢用美人鱼画简单的图表。但流程图似乎只能是top-to-bottomor left-to-right。我可以对方向进行更微妙的控制，使流程图看起来更紧凑（如下图）吗？

我似乎无法在我的 ERD 中设置任何元素的样式。

对于名为 的实体PERSON，以下任何代码都会导致语法错误：

style PERSON fill:#f9f;

或者

classDef className fill:#f9f; 
class PERSON className;

或者

classDef default fill:#f9f;

查看文档，我应该能够使用简单的样式： https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram ?id=styling

基本上，我正在尝试制作一个高级 ERD，其中我需要标记某些实体以指示差异。

任何帮助或建议将不胜感激。:-)

有没有办法设置 Mermaid 流程图节点中文本的最大宽度，以便它自动换行？

例如 - 如何让第一张图看起来像第二张图，而不需要费力地插入手动换行符：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js"></script>

<div class="mermaid">
flowchart TD
    A{Is it Friday midday UTC?} -- Yes --> B(Check out Daft Punk's new single 'Get Lucky' if you have the chance. Sound of the summer.)
    A -- No --> C(Never mind then)
</div>

<h2>Desired output</h2>
<div class="mermaid">
flowchart TD
    A{Is it Friday</br>midday UTC?} -- Yes --> B(Check out Daft Punk's new single</br>'Get Lucky' if you have the chance.</br>Sound of the summer.)
    A -- No --> C(Never mind then) …

我必须每天生成一个甘特图.我的想法是使用R的DiagrammeR包中包含的美人鱼api.

我的数据总是具有相同的结构,因此,我创建了一个非常原始的解析器,它包含在可重现的示例中.

我面临的问题是,在4个部分后,样式从零开始:

rect.section.section0
rect.section.section1
rect.section.section2
rect.section.section3
rect.section.section0

我可以改变rect.section.sectionx.css的颜色,但我不能添加新颜色.

有没有办法改变/个性化该部分的颜色/样式？

我可R重复的例子:

library(DiagrammeR)
library(htmltools)

fromdftogantt<-function(df,Title="Proba",filename="proba.html"){
  txt<-paste("gantt","dateFormat  YYYY-MM-DD",paste("title",Title),"",sep="\n")
  for(i in unique(df$section)){
    txt<-paste(txt,paste("section",i),sep="\n")
    for(j in which(df$section==i)){

      txt<-paste(txt,paste0(df$name[j],":",df$status[j],",",
                            df$fecini[j],",",
                            df$fecfin[j]),sep="\n")
    }
    txt<-paste0(txt,"\n")
  }
  m<-mermaid(txt)
  m$x$config = list(ganttConfig = list(
    axisFormatter = list(list(
      "%m-%Y" 
      ,htmlwidgets::JS(
        'function(d){ return d.getDate() == 1 }' 
      )
    ))
  ))
  save_html(as.tags(m),file=filename)
}

df<-data.frame(section=letters[1:6],name=paste("Name",1:6),
               status=rep("active",6),
               fecini=as.Date(c("2015-02-03","2015-03-05","2015-04-07",
                                "2015-02-03","2015-03-05","2015-04-07")),
               fecfin=as.Date(c("2015-06-01","2015-04-30","2015-12-31",
                                "2015-06-01","2015-04-30","2015-12-31")),
               stringsAsFactors = FALSE)

fromdftogantt(df,Title="Proba",filename="proba.html")

我有一个rmarkdown演示文稿(ioslides)有3张幻灯片,流程图在DiagrammeR美人鱼中工作.保存为.Rmd的以下文件可以重现该示例(至少在我的机器中,希望您也是如此):

---
title: "Untitled"
author: "author"
date: "28 de enero de 2018"
output: ioslides_presentation
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)

require(DiagrammeR)
```

## DiagrammeR's mermaid

It's not producing consistent results in slides when using line breaks.

```{r flow}
mermaid("
  graph LR
    C(CLIENTES <br>Clients) --> D[Doctors]
    U(USUARIOS <br>Users <br>Patients <br>Nurses) --> D
    D --> S(SALIDAS <br>Medicines <br>Surgery)
    style C fill: #f5f5dc
    style D fill: #4682b4
    style U fill: #ffe4c4
")
```

## Second attempt

```{r flow2}
mermaid("
  graph …

AzureDevOps 目前支持哪个版本的 mermaid？官方文档中只提到了一些支持的图表。

我使用 Mermaid 图作为 GitHub 上 Markdown 文件的一部分。这样做的一个副作用是我无法访问 javascript，否则我可以用它来解决问题。

MermaidJS主题系统允许您在图表定义中内联指定自定义主题，如下所示：

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#93D0FF',
      'primaryTextColor': '#000'
    }
  }
}%%
flowchart TD;
    queue[Queue] -- Query for Items --> db[(Database)]
    db --> queue
    queue -- Found Item --> process[Process Item]

这非常有效，只是颜色是硬编码的，而且我发现在深色模式下使用浏览器时，图表会设置为深色背景，并且某些部分变得不可读。

美人鱼具有“深色模式支持”，如果我根本不指定任何自定义主题，那么当浏览器处于深色模式时，它会自动选择深色模式兼容的主题。然而，默认的“灯光模式”美人鱼主题很丑，所以这不是一个很好的解决方案。

我想做的是这样的

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#93D0FF',
      'primaryTextColor': (darkMode ? '#fff' : '#000')
    }
  }
}%%
flowchart...

然而，文档没有提及任何有关内部动态计算的内容themeVariables，并且我上面对三元运算符的尝试不起作用。

是否可以计算值，或以其他方式更改内联主题，使其在浅色和深色模式下工作，在 GitHub 等 JavaScript 不可用的环境中？

注意：mermaidjs 主题文档说有一个名为 的变量background。我尝试将其设置为强制背景颜色为白色（试图“选择退出”深色模式），但这也不起作用。

我正在用 Mermaid 制作序列图，我发现这个loop功能非常酷，用以下代码块在循环周围绘制一个带标签的矩形：

sequenceDiagram
    loop Title
        Alice->>Bob: Hello John, how are you?
        Bob->>Alice: Answer
            loop Title
                Bob->>Bob: Thinks
            end
    end

渲染效果如下：

我的问题是：我可以将这个矩形容器元素用于除循环以外的其他用途吗？仅用于对事物进行分组，并将其命名为除“循环”之外的任何我想要的名称（如果我更改关键字，则它不起作用loop）。好像只有‘loop’、‘opt’和‘alt’授权关键字？

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

如何设计美人鱼子图中的标题样式？我想让字体变大，并在标题和其下面的第一个节点之间添加一些空白。

我尝试在标题后添加一些内容<br/>'s，但这将标题推到了子图边界之上。

graph TB

subgraph someID[Some Title]
    direction TB
    ....
end