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

Question

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

Answer 1

我暂时按照这个方法，直到MS升级美人鱼:

1. 使用 Mermaid live editor 创建图表并使用所需的功能(例如自定义字体大小、填充等)

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

1. 把这张图放到维基页面

2. 使用 Mermaid live editor 创建图像(请参阅“链接到图像”按钮)并将其也放入维基页面

---

结果得到下一个 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
:::