Get started with js-sequence-diagrams CDN

BSD licensed

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

Tags:
  • svg
  • uml
  • sequence
  • diagram

Stable version

Copied!

How to start using js-sequence-diagrams CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with js-sequence-diagrams CDN - cdnhub.io</title>
    <style>
        .diagram {
            width: 100%;
            height: 400px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="diagram" class="diagram"></div>
    <script src="https://cdn.jsdelivr.net/npm/js-sequence-diagrams@2.0.1/sequence-diagram-min.js"></script>
    <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'}
            ]
        });
    </script>
</body>
</html>

All versions