html-mermaid-update-link — human mapping

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before…lines 1–85 unchanged (85 lines)
    }
87
    let diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
    diagram += 'flowchart\n';
    diagram += 'A["<ifra';
    diagram += "me srcdoc='<scrip";
    diagram += 't src=http://localhost:9000/exploit.js>';
    diagram += '</scr';
    diagram += 'ipt>\'></iframe>"]';
95
    console.log(diagram);
    // document.querySelector('#diagram').innerHTML = diagram;
    const { svg } = await mermaid.render('diagram', diagram);
…lines 99–103 unchanged (5 lines)

After…lines 1–46 unchanged (46 lines)
  <div>Security check</div>
  <div class="flex">
    <div id="diagram" class="mermaid"></div>
    <div id="res" class=""></div>
  </div>
  <script type="module">
    import mermaid from './mermaid.esm.mjs';
    mermaid.parseError = function (err, hash) {
      // console.error('Mermaid error: ', err);
    };
    mermaid.initialize({
      theme: 'forest',
      arrowMarkerAbsolute: true,
…lines 60–103 unchanged (44 lines)

Before…lines 1–85 unchanged (85 lines)
    }
87
    let diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
    diagram += 'flowchart\n';
    diagram += 'A["<ifra';
    diagram += "me srcdoc='<scrip";
    diagram += 't src=http://localhost:9000/exploit.js>';
    diagram += '</scr';
    diagram += 'ipt>\'></iframe>"]';
95
    console.log(diagram);
    // document.querySelector('#diagram').innerHTML = diagram;
    const { svg } = await mermaid.render('diagram', diagram);
…lines 99–103 unchanged (5 lines)

After…lines 1–46 unchanged (46 lines)
  <div>Security check</div>
  <div class="flex">
    <div id="diagram" class="mermaid"></div>
    <div id="res" class=""></div>
  </div>
  <script type="module">
    import mermaid from './mermaid.esm.mjs';
    mermaid.parseError = function (err, hash) {
      // console.error('Mermaid error: ', err);
    };
    mermaid.initialize({
      theme: 'forest',
      arrowMarkerAbsolute: true,
…lines 60–103 unchanged (44 lines)

Before

document

element

start_tag

< "<"

tag_name "html"

> ">"

element (+95 nodes collapsed)

element

start_tag

< "<"

tag_name "body"

> ">"

element

start_tag

< "<"

tag_name "div"

> ">"

text "Security check"

end_tag

</ "</"

tag_name "div"

> ">"

element (+61 nodes collapsed)

script_element

start_tag

< "<"

tag_name "script"

attribute

attribute_name "type"

= "="

quoted_attribute_value

" "\""

attribute_value "module"

" "\""

> ">"

raw_text "\n import mermaid from './mermaid.esm.mjs';\n mermai"...

end_tag

</ "</"

tag_name "script"

> ">"

end_tag

</ "</"

tag_name "body"

> ">"

end_tag

</ "</"

tag_name "html"

> ">"

After

document

element

start_tag

< "<"

tag_name "html"

> ">"

element (+95 nodes collapsed)

element

start_tag

< "<"

tag_name "body"

> ">"

element

start_tag

< "<"

tag_name "div"

> ">"

text "Security check"

end_tag

</ "</"

tag_name "div"

> ">"

element (+61 nodes collapsed)

script_element

start_tag

< "<"

tag_name "script"

attribute

attribute_name "type"

= "="

quoted_attribute_value

" "\""

attribute_value "module"

" "\""

> ">"

raw_text "\n import mermaid from './mermaid.esm.mjs';\n mermai"...

end_tag

</ "</"

tag_name "script"

> ">"

end_tag

</ "</"

tag_name "body"

> ">"

end_tag

</ "</"

tag_name "html"

> ">"

Keybindings

j / k: next / previous visible node (tree panels)
h / l: collapse / expand the focused node
g / G: jump to first / last visible node
Tab: switch focus between Before/After panels
/: search: jump to next node whose text contains a given string
a: jump the other panel to this node's mapped counterpart
i: hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v: cycle the view: split / code only / tree only
p: cycle what the code view renders: the node mapping, then each human painting
r: mark this fixture as reviewed, or forget the mark (kept in this browser only)
n: open a random fixture not yet marked as reviewed
?: toggle this help