HTML Script data tokenization diagrams

script-data-escape.dot

// Credit: Dennis Snell (@dmsnell)
digraph G {
	rankdir=TB;
	nodesep=0.5;
	ranksep=0.8;
	fontname="sans-serif";

    // Entry point
    entry [shape=plaintext label="Open script"];
    entry -> script_data;

	// Double-circle states arranged more compactly
	data [shape=doublecircle label="Close script" fontname="sans-serif"];
	script_data [shape=doublecircle color=blue label="script\ndata" fontname="sans-serif"];
	script_data_escaped [shape=circle color=orange label="escaped" fontname="sans-serif"];
	script_data_double_escaped [shape=circle color=red label="double\nescaped" fontname="sans-serif"];

	// Group related nodes on same ranks where possible
	{rank=same; script_data script_data_escaped script_data_double_escaped}

	script_data -> script_data [label="<!--…>\n(all dashes)" labelloc=b tailport=nw headport=sw fontname="monospace"];
	script_data -> script_data_escaped [label="<!--" fontname="monospace"];
	script_data -> data [label=<&lt;/script<FONT COLOR="blue">✦</FONT>> fontname="monospace"];

	script_data_escaped -> script_data [label="-->" fontname="monospace"];
	script_data_escaped -> script_data_double_escaped [label=<&lt;script<FONT COLOR="BLUE">✦</FONT>&#xA0;> fontname="monospace"];
	script_data_escaped -> data [label=<&lt;/script<FONT COLOR="blue">✦</FONT>> fontname="monospace"];

	script_data_double_escaped -> script_data [xlabel="-->" fontname="monospace"];
	script_data_double_escaped -> script_data_escaped [label=<&lt;/script<FONT COLOR="blue">✦</FONT>> fontname="monospace"];

	label=<<FONT COLOR="BLUE">✦</FONT> = SP, HT, FF, CR, NL, /, &gt;>;
	labelloc=b;
	labeljust=r;
}

script-data-simplified.mmd

script-data.mmd