Jake Diagram Generator

Input

Preview

01234
top/t-a/t-a#foo/t-b
frames[0]/i-0-a/i-0-b
frames[1]/i-1-a/i-1-b

Code

<!--https://domenic.github.io/jake-diagram-generator/#IWN1cnJlbnQgPSAxCnRvcAogIDAtMjogL3QtYSB8IGRvYzEKICAzOiAvdC1hI2ZvbyB8IGRvYzEKICA0OiAvdC1iCmZyYW1lc1swXQogIDA6IC9pLTAtYQogIDEtMzogL2ktMC1iCmZyYW1lc1sxXQogIDAtMTogL2ktMS1hCiAgMi0zOiAvaS0xLWIK --> <table class="jake-diagram"><thead><tr><td></td><th class="step">0</th><th class="step current">1</th><th class="step">2</th><th class="step">3</th><th class="step">4</th></tr></thead><tbody><tr><th><code data-x="">top</code></th><td colspan="3" class="doc-0 current next-is-same-doc">/t-a</td><td colspan="1" class="doc-0 prev-is-same-doc">/t-a#foo</td><td colspan="1" class="doc-1">/t-b</td></tr><tr><th><code data-x="">frames[0]</code></th><td colspan="1" class="doc-2">/i-0-a</td><td colspan="3" class="doc-3 current">/i-0-b</td></tr><tr><th><code data-x="">frames[1]</code></th><td colspan="2" class="doc-4 current">/i-1-a</td><td colspan="2" class="doc-5">/i-1-b</td></tr></tbody></table>

What's all this?

A "Jake diagram", named after their inventor, the imitable Jake Archibald, depicts the joint session history of a web browser. Learn more in the preview version of the HTML Standard pull request that will be introducing them.

This tool allows you to generate and edit Jake diagrams, using a hacked-together domain-specific language. It's intended to be used mainly by contributors to the HTML Standard, especially those working on the navigation and session history rewrite.

The language's primary format is:

The language has the following special lines, both optional: