wireloom in markdown viewers

Keith Collyer

I’m unclear as to the best markdown viewer for NP++ so posting here in the hope that at least one author will pick this up.
A tool, wireloom, for creating user interface diagrams from text in a markdown fenced code block has been released on Github: https://github.com/StardockCorp/Wireloom. It creates rather good wireframes for UI development. I wondered if any of the markdown viewer plugin authors would be interested in incorporating it in their plugins.
I did look at the resepctive GitHub pages for the viewers, but none seem to allow for requesting new features.

rdipardo

Provided you have MS Edge installed, here’s an example that works fine with the Preview HTML plugin:

<!DOCTYPE html>
<html>
  <head>
    <title>wireloom demo</title>
  </head>
  <body>
    <div id="container"></div>
  <script type="module">
    import wireloom from 'https://cdn.jsdelivr.net/npm/wireloom@0.7.0/+esm';

    wireloom.initialize({ theme: 'default' });

    // Render a source string to an SVG string.
    const { svg } = await wireloom.render('my-diagram',`
window "Sign in":
  header:
    text "Welcome"
  panel:
    input placeholder="Email"
    input placeholder="Password" type=password
    button "Sign in" primary
`);
    document.getElementById('container').innerHTML = svg;
  </script>
  </body>
</html>