@echarts-extension/sequence-diagram

Language: English | 中文

ECharts extension chart for UML sequence diagrams.

import * as echarts from 'echarts';
import '@echarts-extension/sequence-diagram';

const chart = echarts.init(document.getElementById('main'));
chart.setOption({
  series: [
    {
      type: 'sequenceDiagram',
      participants: [
        { id: 'browser', name: 'Browser' },
        { id: 'api', name: 'API' },
        { id: 'db', name: 'Database' }
      ],
      messages: [
        { from: 'browser', to: 'api', text: 'GET /orders', type: 'sync' },
        { from: 'api', to: 'db', text: 'SELECT orders', type: 'async' },
        { from: 'db', to: 'api', text: 'rows', type: 'return' },
        { from: 'api', to: 'api', text: 'cache()', type: 'self' }
      ],
      activations: [
        { participant: 'api', start: 0, end: 3 }
      ]
    }
  ]
});

Text DSL can be passed directly with dsl or source:

chart.setOption({
  series: [
    {
      type: 'sequenceDiagram',
      dsl: `
        sequenceDiagram
          actor C as Client
          participant API as Order API
          create participant Session
          C->>+API: GET /orders
          API->>Session**: create session
          Note right of API: validate token
          opt cached
            API-->>-C: response
          end
          duration API,Session: < 100ms
          API-xSession: close
      `
    }
  ]
});

Options

This table is generated by scripts/sync-options-from-readmes.mjs --write-readmes. Update the English README option table, then run npm run docs:sync-options to refresh the docs page.

| Option | Description | Values | | --- | --- | --- | | type | Registers this package series with ECharts. | 'sequenceDiagram' | | silent | Disables mouse events for the series when true. | boolean | | width | Series box width. | number \| string (pixel or percent) | | height | Series box height. | number \| string (pixel or percent) | | top | Distance from the top of the chart container. | number \| string (pixel or percent) | | right | Distance from the right of the chart container. | number \| string (pixel or percent) | | bottom | Distance from the bottom of the chart container. | number \| string (pixel or percent) | | left | Distance from the left of the chart container. | number \| string (pixel or percent) | | participants | Participants or actors that appear across the top of the diagram. | Array<object \| [id, name] \| string \| number> | | participants.id | Record id. | string \| number | | participants.name | Display name. | string \| number | | participants.label | Per-record label style. | Object | | participants.label.show | Shows labels when true. | boolean | | participants.label.color | Label text color. | string | | participants.label.fontSize | Label text size. | number | | participants.label.fontWeight | Label font weight. | string \| number | | participants.label.formatter | Formats label text. | string \| function | | messages | Message arrows between participants. | Array<object \| [from, to, text, type]> | | messages.from | Source participant or item id. | string \| number | | messages.to | Target participant or item id. | string \| number | | messages.text | Displayed text. | string \| number | | messages.type | Record type. | string \| number | | messages.lineStyle | line style field. | Object | | messages.lineStyle.show | Shows this line group when true. | boolean | | messages.lineStyle.color | Line color. | string | | messages.lineStyle.stroke | Alias for line color. | string | | messages.lineStyle.width | Line width. | number | | messages.lineStyle.lineWidth | Alias for line width. | number | | messages.lineStyle.opacity | Line opacity. | number | | messages.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | messages.lineStyle.dashOffset | Dash pattern offset. | number | | messages.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | messages.lineStyle.cornerRadius | Corner radius for routed lines. | number | | messages.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | messages.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | messages.lineStyle.dashArray | Dash pattern. | number[] \| string | | messages.lineStyle.lineDash | Dash pattern alias. | number[] | | messages.label | Per-record label style. | Object | | messages.label.show | Shows labels when true. | boolean | | messages.label.color | Label text color. | string | | messages.label.fontSize | Label text size. | number | | messages.label.fontWeight | Label font weight. | string \| number | | messages.label.formatter | Formats label text. | string \| function | | data | Alias for message rows. | Array<object \| [from, to, text, type]> | | data.from | Source participant or item id. | string \| number | | data.to | Target participant or item id. | string \| number | | data.text | Displayed text. | string \| number | | data.type | Record type. | string \| number | | data.lineStyle | line style field. | Object | | data.lineStyle.show | Shows this line group when true. | boolean | | data.lineStyle.color | Line color. | string | | data.lineStyle.stroke | Alias for line color. | string | | data.lineStyle.width | Line width. | number | | data.lineStyle.lineWidth | Alias for line width. | number | | data.lineStyle.opacity | Line opacity. | number | | data.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | data.lineStyle.dashOffset | Dash pattern offset. | number | | data.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | data.lineStyle.cornerRadius | Corner radius for routed lines. | number | | data.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | data.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | data.lineStyle.dashArray | Dash pattern. | number[] \| string | | data.lineStyle.lineDash | Dash pattern alias. | number[] | | data.label | Per-record label style. | Object | | data.label.show | Shows labels when true. | boolean | | data.label.color | Label text color. | string | | data.label.fontSize | Label text size. | number | | data.label.fontWeight | Label font weight. | string \| number | | data.label.formatter | Formats label text. | string \| function | | activations | Activation bars on participant lifelines. | Array<object> | | activations.participant | participant field. | string \| number | | activations.start | start field. | number | | activations.end | end field. | number | | activations.itemStyle | Per-record item style. | Object | | activations.itemStyle.color | Fill color. | string | | activations.itemStyle.fill | Alias for fill color. | string | | activations.itemStyle.opacity | Fill opacity. | number | | activations.itemStyle.borderColor | Border color. | string | | activations.itemStyle.borderWidth | Border width. | number | | activations.itemStyle.borderRadius | Corner radius. | number | | activations.itemStyle.shadowBlur | Shadow blur radius. | number | | activations.itemStyle.shadowColor | Shadow color. | string | | activations.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | notes | Text notes attached to a participant or span. | Array<object> | | notes.participant | participant field. | string \| number | | notes.text | Displayed text. | string | | notes.start | start field. | number | | notes.end | end field. | number | | notes.itemStyle | Per-record item style. | Object | | notes.itemStyle.color | Fill color. | string | | notes.itemStyle.fill | Alias for fill color. | string | | notes.itemStyle.opacity | Fill opacity. | number | | notes.itemStyle.borderColor | Border color. | string | | notes.itemStyle.borderWidth | Border width. | number | | notes.itemStyle.borderRadius | Corner radius. | number | | notes.itemStyle.shadowBlur | Shadow blur radius. | number | | notes.itemStyle.shadowColor | Shadow color. | string | | notes.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | notes.label | Per-record label style. | Object | | notes.label.show | Shows labels when true. | boolean | | notes.label.color | Label text color. | string | | notes.label.fontSize | Label text size. | number | | notes.label.fontWeight | Label font weight. | string \| number | | notes.label.formatter | Formats label text. | string \| function | | fragments | Alt, opt, loop, or other grouped interaction fragments. | Array<object> | | fragments.type | Record type. | string | | fragments.text | Displayed text. | string | | fragments.start | start field. | number | | fragments.end | end field. | number | | fragments.messages | messages field. | Array<object> | | fragments.messages.from | Source participant or item id. | string \| number | | fragments.messages.to | Target participant or item id. | string \| number | | fragments.messages.text | Displayed text. | string | | fragments.messages.type | Record type. | string | | fragments.messages.lineStyle | line style field. | Object | | fragments.messages.lineStyle.show | Shows this line group when true. | boolean | | fragments.messages.lineStyle.color | Line color. | string | | fragments.messages.lineStyle.stroke | Alias for line color. | string | | fragments.messages.lineStyle.width | Line width. | number | | fragments.messages.lineStyle.lineWidth | Alias for line width. | number | | fragments.messages.lineStyle.opacity | Line opacity. | number | | fragments.messages.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | fragments.messages.lineStyle.dashOffset | Dash pattern offset. | number | | fragments.messages.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | fragments.messages.lineStyle.cornerRadius | Corner radius for routed lines. | number | | fragments.messages.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | fragments.messages.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | fragments.messages.lineStyle.dashArray | Dash pattern. | number[] \| string | | fragments.messages.lineStyle.lineDash | Dash pattern alias. | number[] | | fragments.messages.label | Per-record label style. | Object | | fragments.messages.label.show | Shows labels when true. | boolean | | fragments.messages.label.color | Label text color. | string | | fragments.messages.label.fontSize | Label text size. | number | | fragments.messages.label.fontWeight | Label font weight. | string \| number | | fragments.messages.label.formatter | Formats label text. | string \| function | | fragments.itemStyle | Per-record item style. | Object | | fragments.itemStyle.color | Fill color. | string | | fragments.itemStyle.fill | Alias for fill color. | string | | fragments.itemStyle.opacity | Fill opacity. | number | | fragments.itemStyle.borderColor | Border color. | string | | fragments.itemStyle.borderWidth | Border width. | number | | fragments.itemStyle.borderRadius | Corner radius. | number | | fragments.itemStyle.shadowBlur | Shadow blur radius. | number | | fragments.itemStyle.shadowColor | Shadow color. | string | | fragments.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | fragments.label | Per-record label style. | Object | | fragments.label.show | Shows labels when true. | boolean | | fragments.label.color | Label text color. | string | | fragments.label.fontSize | Label text size. | number | | fragments.label.fontWeight | Label font weight. | string \| number | | fragments.label.formatter | Formats label text. | string \| function | | constraints | Timing or duration annotations. | Array<object> | | constraints.from | Source participant or item id. | string \| number | | constraints.to | Target participant or item id. | string \| number | | constraints.text | Displayed text. | string | | constraints.lineStyle | line style field. | Object | | constraints.lineStyle.show | Shows this line group when true. | boolean | | constraints.lineStyle.color | Line color. | string | | constraints.lineStyle.stroke | Alias for line color. | string | | constraints.lineStyle.width | Line width. | number | | constraints.lineStyle.lineWidth | Alias for line width. | number | | constraints.lineStyle.opacity | Line opacity. | number | | constraints.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | constraints.lineStyle.dashOffset | Dash pattern offset. | number | | constraints.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | constraints.lineStyle.cornerRadius | Corner radius for routed lines. | number | | constraints.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | constraints.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | constraints.lineStyle.dashArray | Dash pattern. | number[] \| string | | constraints.lineStyle.lineDash | Dash pattern alias. | number[] | | constraints.label | Per-record label style. | Object | | constraints.label.show | Shows labels when true. | boolean | | constraints.label.color | Label text color. | string | | constraints.label.fontSize | Label text size. | number | | constraints.label.fontWeight | Label font weight. | string \| number | | constraints.label.formatter | Formats label text. | string \| function | | dsl | Mermaid-like sequence diagram source string. | string | | source | Alias for dsl source string. | string | | padding | Inset around the sequence diagram. | number \| object | | padding.top | Top inset. | number | | padding.right | Right inset. | number | | padding.bottom | Bottom inset. | number | | padding.left | Left inset. | number | | headerHeight | Height of the participant header area. | number | | headerWidth | Minimum width reserved for each participant header. | number | | messageGap | Vertical gap between message rows. | number | | selfLoopWidth | Width of self-loop messages. | number | | selfLoopHeight | Height of self-loop messages. | number | | activationWidth | Width of activation bars. | number | | activationMargin | Horizontal offset used for nested activations. | number | | participantStyle | Styles participant headers. | Object | | participantStyle.color | Primary color. | string | | participantStyle.fill | Fill color. | string | | participantStyle.opacity | Opacity. | number | | participantStyle.borderColor | Border color. | string | | participantStyle.borderWidth | Border width. | number | | participantStyle.borderRadius | Corner radius. | number | | lifelineStyle | Styles participant lifelines. | Object | | lifelineStyle.color | Primary color. | string | | lifelineStyle.stroke | Stroke color. | string | | lifelineStyle.width | Width value. | number | | lifelineStyle.lineWidth | Line width. | number | | lifelineStyle.opacity | Opacity. | number | | lifelineStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | activationStyle | Styles activation bars. | Object | | activationStyle.color | Primary color. | string | | activationStyle.opacity | Opacity. | number | | activationStyle.borderColor | Border color. | string | | activationStyle.borderWidth | Border width. | number | | activationStyle.shadowBlur | Shadow blur radius. | number | | activationStyle.shadowColor | Shadow color. | string | | noteStyle | Styles notes. | Object | | noteStyle.color | Primary color. | string | | noteStyle.fill | Fill color. | string | | noteStyle.opacity | Opacity. | number | | noteStyle.borderColor | Border color. | string | | noteStyle.borderWidth | Border width. | number | | noteStyle.borderRadius | Corner radius. | number | | fragmentStyle | Styles fragments. | Object | | fragmentStyle.color | Primary color. | string | | fragmentStyle.fill | Fill color. | string | | fragmentStyle.opacity | Opacity. | number | | fragmentStyle.borderColor | Border color. | string | | fragmentStyle.borderWidth | Border width. | number | | fragmentStyle.borderRadius | Corner radius. | number | | constraintStyle | Styles timing and duration constraints. | Object | | constraintStyle.color | Primary color. | string | | constraintStyle.stroke | Stroke color. | string | | constraintStyle.width | Width value. | number | | constraintStyle.lineWidth | Line width. | number | | constraintStyle.opacity | Opacity. | number | | constraintStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | lineStyle | Styles message lines. | Object | | lineStyle.color | Primary color. | string | | lineStyle.stroke | Stroke color. | string | | lineStyle.width | Width value. | number | | lineStyle.lineWidth | Line width. | number | | lineStyle.opacity | Opacity. | number | | lineStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | label | Styles message labels. | Object | | label.show | Shows labels when true. | boolean | | label.color | Label text color. | string | | label.fontSize | Label text size. | number | | label.fontWeight | Label font weight. | string \| number | | label.formatter | Formats label text. | string \| function | | participantLabel | Styles participant labels. | Object | | participantLabel.show | Shows labels when true. | boolean | | participantLabel.color | Label text color. | string | | participantLabel.fontSize | Label text size. | number | | participantLabel.fontWeight | Label font weight. | string \| number | | participantLabel.formatter | Formats label text. | string \| function | | emphasis | Styles diagram elements while hovered. | Object | | emphasis.itemStyle | Nested item style option. | object | | emphasis.itemStyle.color | Fill color. | string | | emphasis.itemStyle.fill | Alias for fill color. | string | | emphasis.itemStyle.opacity | Fill opacity. | number | | emphasis.itemStyle.borderColor | Border color. | string | | emphasis.itemStyle.borderWidth | Border width. | number | | emphasis.itemStyle.borderRadius | Corner radius. | number | | emphasis.itemStyle.shadowBlur | Shadow blur radius. | number | | emphasis.itemStyle.shadowColor | Shadow color. | string | | emphasis.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | emphasis.edgeStyle | Nested edgeStyle option. | object | | emphasis.edgeStyle.color | Fill color. | string | | emphasis.edgeStyle.fill | Alias for fill color. | string | | emphasis.edgeStyle.opacity | Fill opacity. | number | | emphasis.edgeStyle.borderColor | Border color. | string | | emphasis.edgeStyle.borderWidth | Border width. | number | | emphasis.edgeStyle.borderRadius | Corner radius. | number | | emphasis.edgeStyle.shadowBlur | Shadow blur radius. | number | | emphasis.edgeStyle.shadowColor | Shadow color. | string | | emphasis.edgeStyle.lineWidth | Stroke width used by icon or shape styles. | number | | emphasis.focus | Nested focus option. | string | | emphasis.blurScope | Nested blurScope option. | string |