選項卡中的美人魚

Question

箭頭未顯示在第二個選項卡中。 漏洞？
它在這里工作https://docusaurus.io/tests/pages/diagrams#mermaid-in-tabs

我有：

a) 在“tab-a”中，顯示箭頭：

b) 但在“tab-b”中，箭頭不顯示：

---

文檔龍版本：2.2.0
類型文件：.md 或 .mdx

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="tab-a">

The following mermaid diagram is shown:

```mermaid
graph LR
  a ---> c(10)
  b ---> c(10)
```

</TabItem>

<TabItem value="tab-b">

This mermaid diagram is not displayed:

```mermaid
graph LR
  d ---> z(42)
  e ---> z(42)
```

</TabItem>
</Tabs>

Answer 1

我從您的 docussaurus 參考中復制/粘貼了代碼，所以我可以看到問題所在。

我相信這確實是一個錯誤......

---

這就是我設法解決的方法：

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Mermaid in tabs


<!-- [start] add this to avoid the possible bug. Note: the empty line before [```] is necessary -->
```mermaid
flowchart TD

```
<!-- [end] add this to avoid the possible bug -->


<Tabs>
<TabItem value="tab-a">

```mermaid
graph LR
  a ---> c(10)
  b ---> c(10)
```

</TabItem>

<TabItem value="tab-b">

```mermaid
graph LR
  d ---> z(42)
  e ---> z(42)
```

</TabItem>
</Tabs>

---

筆記

1. 我從 docusaurus 下載了有效的頁面；
2. 我修剪了所有代碼，直到它崩潰；
3. 我進行了測試，直到找到一種方法來呈現“想要的”結果，而沒有任何額外的“人工制品”；
4. 現在我們有一個工作代碼，但它是一個解決方法。