npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mscgenjs-inpage

v5.0.1

Published

Embed and render sequence charts in HTML

Downloads

4,180

Readme

mscgenjs-inpage

Embed & render sequence charts in HTML

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

Usage

(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, mscgen.js.org 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
  # https://openid.net/specs/openid-connect-core-1_0.html#rfc.section.1.3
  msc {
    wordwraparcs="true";

    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 {UserInfo.name}"];
  }
</script>

(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:
readme.png

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.

More

  • 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.