Neutral Point Measurement


    4.0.5 • Public • Published


    Embed & render sequence charts in HTML

    linting & test coverage - linux Maintainability Test Coverage npm stable version


    (1) Reference the mscgen-inpage script in your page head:

    <script src="dist/mscgen-inpage.js" defer></script>

    The script is also available for inclusion on your page on unpkg, and github if you just want to use it for quick testing.

    (2) Put your mscgen script in the page, surrounded by a script tag with the text/x-mscgen mime type

    <script type="text/x-mscgen">
      # OpenId Connect protocol
      msc {
        eu [label="end-user"],
        rp [label="relying party"],
        op [label="OpenID provider"];
        eu =>> rp [label="log me in"];
        rp =>> op [label="authentication request"];
        op =>> eu [label="authentication and authorization request"];
        eu >> op [label="authenticate and authorize"];
        op >> rp [label="authentication response"];
        rp =>> op [label="UserInfo request"];
        op >> rp [label="UserInfo response"];
        rp >> eu [label="Hi. You're logged in with {}"];

    (3) You're done. The script replaces all elements in the page with the class mscgen_js by a rendered sequence chart. Result for the above msc:

    We've used script in the sample above, but mscgen_js will work with any element type - and there's even a wikimedia-style <mscgen> tag - see the mscgen_js embedding guide if you want to do this.


    • The mscgen_js embedding guide covers more options, e.g.:
      • How to read MscGen from external files.
      • How to embed MscGen in Atlassian Confluence.
      • Using aribtrary tags or <mscgen> for rendering.
      • Making the charts clickable, so they open in the on line interpreter.
      • Using other sequence chart languages (like Xù and MsGenny)
    • If you want to write MscGen: it's a doddle in the on line interpreter or the atom package.

    Licensing: GPL-3.0 with a relaxation

    mscgen_js is licensed under the GNU General Public License version 3 ("the GPL").

    For using mscgenjs-inpage (in this package: dist/mscgen-inpage.js) a special exception to the GPL is made. This is so you can use it to render sequence charts in documentation which has a different license from the GPL without that documention (let alone the software it documents, if any) having to be licensed under the GPL.

    As a special exception to the GPL, any HTML file which merely makes function calls to mscgen-inpage.js, and for that purpose includes it by reference shall be deemed a separate work for copyright law purposes. In addition, the copyright holders of this code give you permission to combine this code with free software libraries that are released under the GNU LGPL. You may copy and distribute such a system following the terms of the GNU GPL for this code and the LGPL for the libraries. If you modify this code, you may extend this exception to your version of the code, but you are not obligated to do so. If you do not wish to do so, delete this exception statement from your version.


    npm i mscgenjs-inpage

    DownloadsWeekly Downloads






    Unpacked Size

    845 kB

    Total Files


    Last publish


    • sverweij
    • foureightone