Seqdiag.js

drawing sequence diagram on browser


Project maintained by walf443 Hosted on GitHub Pages — Theme by mattgraham

Seqdiag.js

You can draw some sequence diagram with simple text format by JavaScript.

Example

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="../lib/seqdiag/parser.js" ></script>
    <script type="text/javascript" src="../lib/seqdiag.js" ></script>
</head>
<body>
    <figure id="diag"></figure>
    <script type="text/x-seqdiag" id="seqdiag-text">
        seqdiag {
            A [label = "webapp"];
            B [label = "DB"];

            A -> B[label = "sql"];
            B -> A [label = "result"];
        }
    </script>
    <script type="text/javascript">
        window.onload = function() {
            var taget = document.getElementById('seqdiag-text');
            var ast = SeqdiagParser.parse(target.innerText);
            var diagram = Seqdiag.Builder.build(ast);
            var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            svg.setAttribute("width", "1024");
            svg.setAttribute("width", "600");
            var drawer = new Seqdiag.Drawer.SVG(diagram, svg, document);
            drawer.draw();
            var figure = document.getElementById('diag');
            figure.appendChild(svg);
        };
    </script>
</body>
</html>

Try Seqdiag.js

Preview

Support Environment

  • IE 9.0 or later
  • Chrome 20.0 or later
  • Firefox 15.0 or later
  • Safari 6.0 or later
  • Android Standard Browser 4.0.3 or later

Gallary

show more examples.

SEE ALSO

License

(c) 2012 Keiji Yoshimi
This project is released under MIT license.
See followings: http://www.opensource.org/licenses/MIT