Name	Name	Last commit message	Last commit date
parent directory ..
lib	lib
test	test
index.js	index.js
package.json	package.json
readme.md	readme.md
tsconfig.json	tsconfig.json

viewscreen-mermaid

Viewscreen component for mermaid.

What is this?
When should I use this?
Install
Use
API
Bugs
Authoring
HTML
CSS
Types
Compatibility
Security
Related
Contribute
License

What is this?

This library can run inside an <iframe>, with some skeleton HTML. Then, from the outside, you can embed that frame, and send messages to it, to display a mermaid diagram.

This behavior is specific to github.com that works in comments and files. Using <iframe>s is a way to create components agnostic to a framework: you can use this with plain JavaScript or with React, for example.

This library is part of a monorepo rehype-github. See its readme for more info.

When should I use this?

You can use this library when you want to match how github.com works or when you want to build similar pipelines.

This library is useful if you want to user content to include mermaid diagrams.

Install

This package is ESM only. In browsers with esm.sh:

<script type="module">
  import {viewscreenMermaid} from 'https://esm.sh/viewscreen-mermaid@0?bundle'
</script>

Use

Say our file viewscreen-mermaid.html looks as follows:

<!doctype html>
<html lang=en>
<meta content=width=device-width,initial-scale=1 name=viewport>
<meta charset=utf8>
<title>viewscreen: mermaid</title>
<style>/* … */</style>
<script type=module>
  import {viewscreenMermaid} from 'https://esm.sh/viewscreen-mermaid@0?bundle'

  const id = window.location.hash.slice(1)
  if (!id) throw new Error('Expected `id` in hash')
  const parent = window.parent
  if (!parent) throw new Error('Expected parent window')

  const viewer = create(document.body, {
    onSizeSuggestion(width, height) {
      parent.postMessage({type: 'resize', id, value: {width, height}})
    }
  })

  window.addEventListener('message', function (event) {
    if (event.data.type === 'content') {
      viewer.change(event.data.value)
    }
  })
</script>

…and a file index.html looks as follows:

<!doctype html>
<html lang=en>
<meta charset=utf8>
<meta content=width=device-width,initial-scale=1 name=viewport>
<title>example</title>
<link rel=stylesheet href=https://esm.sh/github-markdown-css@5/github-markdown.css>
<style>/* … */</style>
<div class=markdown-body>
<pre><code class=language-mermaid>graph TD;
A--&gt;B;
</code></pre>
</div>
<script type=module>
  const hasOwn = {}.hasOwnProperty

  const types = {mermaid: '/viewscreen-mermaid.html'}

  /**
   * Handle a message from any viewscreen iframe.
   */
  window.addEventListener('message', function (event) {
    if (event.data.type === 'resize') {
      // We use unique names, but not bad to handle arrays.
      const nodes = document.getElementsByName(event.data.id)

      for (const node of nodes) {
        node.setAttribute('style', `height:${event.data.value.height}px`)
      }
    }
  })

  const nodes = Array.from(document.body.querySelectorAll('code'))
  const prefix = 'language-'

  for (const node of nodes) {
    const className = Array.from(node.classList).find((d) => d.startsWith(prefix))
    if (!className) continue
    const name = className.slice(prefix.length)

    const specifier = hasOwn.call(types, name) ? types[name] : undefined

    if (!specifier) continue

    const value = node.textContent || ''
    const id = crypto.randomUUID()
    const url = new URL(specifier, window.location.href)
    url.hash = id
    const iframe = document.createElement('iframe')

    iframe.classList.add('render-viewer')
    iframe.setAttribute('role', 'presentation')
    iframe.setAttribute('name', id)
    iframe.setAttribute('src', String(url))
    iframe.setAttribute('style', 'opacity:0')

    iframe.addEventListener('load', function () {
      const otherWindow = iframe.contentWindow
      if (!otherWindow) throw new Error('Expected `contentWindow`')
      const message = {type: 'content', id, value}
      iframe.setAttribute('style', '')
      otherWindow.postMessage(message)
    })

    const scope =
      node.parentElement && node.parentElement.nodeName === 'PRE'
        ? node.parentElement
        : node
    scope.replaceWith(iframe)
  }
</script>

…now assuming both run on a server localhost:8000, opening that in a browser shows the diagram!

API

This package exports the identifier viewscreenMermaid. There is no default export.