Embedding diagrams in web pages

We explain here the recommended workflow to embed diagrams generated by SheetShow in HTML pages. This will let your readers rotate the diagrams directly inside the page.

Workflow overview

• Compose your diagram in SheetShow.
• Add SheetShow as a script to your HTML page with <script type=”text/javascript” src=”https://wetneb.github.io/sheetshow/embed/sheetshow.js”></script>.
• Copy the YAML representation of your diagram inside a <script type=”text/sheetshow”></script> tag, at the location in your document where you want the image to be inserted. You can use many of these in the same page.

This will insert SVG images in place of all the scripts you inserted, animated by Javascript.

See this example for a demo.

Configuration options

It is possible to set the width and height of the generated SVG by setting the data-width and data-height parameters on the <script type=”text/sheetshow”></script> tag.

Alternative workflows

You can also save the diagram as an SVG file from SheetShow and include it as an image anywhere else. This will not be animated but has the benefit of not loading Javascript code.