html-mermaid-js-mermaid-add-only

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–18 unchanged (18 lines)
      title My day
      section Go to work
        1930 : first step : second step
             : third step
        1940 : fourth step : fifth step
		</pre>
25
  <h2>Medical Device Lifecycle Timeline</h2>
  <pre class="mermaid">
      timeline
      title Medical Device Lifecycle
      section Planning
        Quality Management System (4) : Regulatory Compliance (4.1) : Risk Management (4.1.3) : Management Review (5.6) : Infrastructure (6.3)
…lines 32–56 unchanged (25 lines)

After…lines 1–19 unchanged (19 lines)
      section Go to work
        1930 : first step : second step
             : third step
        1940 : fourth step : fifth step
		</pre>
25
  <h2>Vertical Timeline</h2>
  <pre class="mermaid">
      timeline TD
      title My day
      section Wake up
        0600 : step
             : step
      section Go to work
        0800 : first step : second step
             : third step very very very very very loooooong
        1940 : fourth step : fifth step
  </pre>
38
  <h2>Medical Device Lifecycle Timeline</h2>
  <pre class="mermaid">
      timeline
      title Medical Device Lifecycle
      section Planning
…lines 44–69 unchanged (26 lines)

Before…lines 1–18 unchanged (18 lines)
      title My day
      section Go to work
        1930 : first step : second step
             : third step
        1940 : fourth step : fifth step
		</pre>
25
  <h2>Medical Device Lifecycle Timeline</h2>
  <pre class="mermaid">
      timeline
      title Medical Device Lifecycle
      section Planning
        Quality Management System (4) : Regulatory Compliance (4.1) : Risk Management (4.1.3) : Management Review (5.6) : Infrastructure (6.3)
…lines 32–56 unchanged (25 lines)

After…lines 1–19 unchanged (19 lines)
      section Go to work
        1930 : first step : second step
             : third step
        1940 : fourth step : fifth step
		</pre>
25
  <h2>Vertical Timeline</h2>
  <pre class="mermaid">
      timeline TD
      title My day
      section Wake up
        0600 : step
             : step
      section Go to work
        0800 : first step : second step
             : third step very very very very very loooooong
        1940 : fourth step : fifth step
  </pre>
38
  <h2>Medical Device Lifecycle Timeline</h2>
  <pre class="mermaid">
      timeline
      title Medical Device Lifecycle
      section Planning
…lines 44–69 unchanged (26 lines)

Before…lines 1–18 unchanged (18 lines)
      title My day
      section Go to work
        1930 : first step : second step
             : third step
        1940 : fourth step : fifth step
		</pre>
25
  <h2>Medical Device Lifecycle Timeline</h2>
  <pre class="mermaid">
      timeline
      title Medical Device Lifecycle
      section Planning
        Quality Management System (4) : Regulatory Compliance (4.1) : Risk Management (4.1.3) : Management Review (5.6) : Infrastructure (6.3)
…lines 32–56 unchanged (25 lines)

After…lines 1–19 unchanged (19 lines)
      section Go to work
        1930 : first step : second step
             : third step
        1940 : fourth step : fifth step
		</pre>
25
  <h2>Vertical Timeline</h2>
  <pre class="mermaid">
      timeline TD
      title My day
      section Wake up
        0600 : step
             : step
      section Go to work
        0800 : first step : second step
             : third step very very very very very loooooong
        1940 : fourth step : fifth step
  </pre>
38
  <h2>Medical Device Lifecycle Timeline</h2>
  <pre class="mermaid">
      timeline
      title Medical Device Lifecycle
      section Planning
…lines 44–69 unchanged (26 lines)

Before

document

doctype

<! "<!"

doctype "doctype"

> ">"

element

start_tag

< "<"

tag_name "html"

> ">"

element (+86 nodes collapsed)

element

start_tag

< "<"

tag_name "body"

> ">"

element

start_tag

< "<"

tag_name "pre"

attribute

attribute_name "class"

= "="

quoted_attribute_value

" "\""

attribute_value "mermaid"

" "\""

> ">"

text "timeline\n title My day\n section Go to work\n "...

end_tag

</ "</"

tag_name "pre"

> ">"

element

start_tag

< "<"

tag_name "h2"

> ">"

text "Medical Device Lifecycle Timeline"

end_tag

</ "</"

tag_name "h2"

> ">"

element

start_tag

< "<"

tag_name "pre"

attribute

attribute_name "class"

= "="

quoted_attribute_value

" "\""

attribute_value "mermaid"

" "\""

> ">"

text "timeline\n title Medical Device Lifecycle\n sect"...

end_tag

</ "</"

tag_name "pre"

> ">"

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

doctype

<! "<!"

doctype "doctype"

> ">"

element

start_tag

< "<"

tag_name "html"

> ">"

element (+86 nodes collapsed)

element

start_tag

< "<"

tag_name "body"

> ">"

element

start_tag

< "<"

tag_name "pre"

attribute

attribute_name "class"

= "="

quoted_attribute_value

" "\""

attribute_value "mermaid"

" "\""

> ">"

text "timeline\n title My day\n section Go to work\n "...

end_tag

</ "</"

tag_name "pre"

> ">"

element

start_tag

< "<"

tag_name "h2"

> ">"

text "Vertical Timeline"

end_tag

</ "</"

tag_name "h2"

> ">"

element

start_tag

< "<"

tag_name "pre"

attribute

attribute_name "class"

= "="

quoted_attribute_value

" "\""

attribute_value "mermaid"

" "\""

> ">"

text "timeline TD\n title My day\n section Wake up\n "...

end_tag

</ "</"

tag_name "pre"

> ">"

element

start_tag

< "<"

tag_name "h2"

> ">"

text "Medical Device Lifecycle Timeline"

end_tag

</ "</"

tag_name "h2"

> ">"

element

start_tag

< "<"

tag_name "pre"

attribute

attribute_name "class"

= "="

quoted_attribute_value

" "\""

attribute_value "mermaid"

" "\""

> ">"

text "timeline\n title Medical Device Lifecycle\n sect"...

end_tag

</ "</"

tag_name "pre"

> ">"

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