Get started with js-sequence-diagrams CDN

BSD licensed

Js-sequence-diagrams is a library for creating interactive sequence diagrams in JS.

  • svg
  • uml
  • sequence
  • diagram

Stable version


How to start using js-sequence-diagrams CDN

<!DOCTYPE html>
    <title>Get started with js-sequence-diagrams CDN -</title>
        .diagram {
            width: 100%;
            height: 400px;
            border: 1px solid #ccc;
    <div id="diagram" class="diagram"></div>
    <script src=""></script>
        SequenceDiagram.define('Example', [
            {actor: 'Alice'},
            {actor: 'Bob'},

            {Alice->>Bob: Hello Bob},
            {Bob->>Alice: Hello Alice},
            {Bob->>Alice: I love you},
            {Alice->>Bob: I love you too :heart:},

        SequenceDiagram.render('diagram', {
            width: 800,
            height: 400,
            title: 'Example Sequence Diagram',
            diagrams: [
                {name: 'Example', direction: 'LR'}

All versions