azure-devops - Azure DevOps wiki 中带有滚动条的美人鱼图

Question

我正在 Azure Devops wiki 中创建一个大序列图，一旦 Mermaid 图中的节点和交互数量增加，查看起来就会变得困难。有没有可能用滚动条来固定图表的大小？

标签： azure-devopsmarkdownmermaid

Answer 1

我暂时遵循这种方式，直到 MS 升级美人鱼：

1. 使用Mermaid 实时编辑器创建图表并使用所需的功能（例如自定义字体大小、填充等）

sequenceDiagram
    %%{init: {'theme': 'default', 'sequence':{'actorMargin': 15, 'height': 130, 'diagramMarginX': 50, 'diagramMarginY': 10, 'messageFontWeight': 'bold', 'actorFontSize': 26, 'actorFontWeight': 800, 'noteFontSize': 26, 'noteFontWeight': 800, 'messageFontSize': 26, 'messageFontWeight': 800}}}%%
    participant A01 
    participant A02
    participant A03
    participant A04
    participant A05
    participant A06
    participant A07
    participant A08
    participant A09
    participant A10

    A01 ->> A02: aa
    A02 ->> A03: bb
    A03 ->> A04: bb
    A04 ->> A05: bb
    A05 ->> A06: bb
    A06 ->> A07: bb
    A07 ->> A08: bb
    A08 ->> A09: bb
    A09 ->> A10: bb

2. 将此图放到 wiki 页面

3. 使用美人鱼实时编辑器创建图像（请参阅“链接到图像”按钮）并将其也放入 wiki 页面

---

结果得到下一个wiki页面：

# Sequence diagram

## Image

![](https://mermaid.ink/img/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG4gICAgJSV7aW5pdDogeyd0aGVtZSc6ICdkZWZhdWx0JywgJ3NlcXVlbmNlJzp7J2FjdG9yTWFyZ2luJzogMTUsICdoZWlnaHQnOiAxMzAsICdkaWFncmFtTWFyZ2luWCc6IDUwLCAnZGlhZ3JhbU1hcmdpblknOiAxMCwgJ21lc3NhZ2VGb250V2VpZ2h0JzogJ2JvbGQnLCAnYWN0b3JGb250U2l6ZSc6IDI2LCAnYWN0b3JGb250V2VpZ2h0JzogODAwLCAnbm90ZUZvbnRTaXplJzogMjYsICdub3RlRm9udFdlaWdodCc6IDgwMCwgJ21lc3NhZ2VGb250U2l6ZSc6IDI2LCAnbWVzc2FnZUZvbnRXZWlnaHQnOiA4MDB9fX0lJVxuICAgIHBhcnRpY2lwYW50IEEwMSBcbiAgICBwYXJ0aWNpcGFudCBBMDJcbiAgICBwYXJ0aWNpcGFudCBBMDNcbiAgICBwYXJ0aWNpcGFudCBBMDRcbiAgICBwYXJ0aWNpcGFudCBBMDVcbiAgICBwYXJ0aWNpcGFudCBBMDZcbiAgICBwYXJ0aWNpcGFudCBBMDdcbiAgICBwYXJ0aWNpcGFudCBBMDhcbiAgICBwYXJ0aWNpcGFudCBBMDlcbiAgICBwYXJ0aWNpcGFudCBBMTBcblxuICAgIEEwMSAtPj4gQTAyOiBhYVxuICAgIEEwMiAtPj4gQTAzOiBiYlxuICAgIEEwMyAtPj4gQTA0OiBiYlxuICAgIEEwNCAtPj4gQTA1OiBiYlxuICAgIEEwNSAtPj4gQTA2OiBiYlxuICAgIEEwNiAtPj4gQTA3OiBiYlxuICAgIEEwNyAtPj4gQTA4OiBiYlxuICAgIEEwOCAtPj4gQTA5OiBiYlxuICAgIEEwOSAtPj4gQTEwOiBiYlxuIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)

## Origin diagram

:::mermaid
sequenceDiagram
    %%{init: {'theme': 'default', 'sequence':{'actorMargin': 15, 'height': 130, 'diagramMarginX': 50, 'diagramMarginY': 10, 'messageFontWeight': 'bold', 'actorFontSize': 26, 'actorFontWeight': 800, 'noteFontSize': 26, 'noteFontWeight': 800, 'messageFontSize': 26, 'messageFontWeight': 800}}}%%
    participant A01 
    participant A02
    participant A03
    participant A04
    participant A05
    participant A06
    participant A07
    participant A08
    participant A09
    participant A10

    A01 ->> A02: aa
    A02 ->> A03: bb
    A03 ->> A04: bb
    A04 ->> A05: bb
    A05 ->> A06: bb
    A06 ->> A07: bb
    A07 ->> A08: bb
    A08 ->> A09: bb
    A09 ->> A10: bb
:::