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>

Keith Collyer

@rdipardo Thanks, that might be helpful. For now, I don’t have Edge and I’m really looking to use it on markdown files within NP++.

Keith Collyer

I wasn’t able to add a PR or Issue to https://github.com/ezyuzin/NppAnotherMarkdown, but it turns out I was able to add an Issue to NPPMarkdownPanel here: https://github.com/mohzy83/NppMarkdownPanel/issues/192.
What would be really good would be if the developers of these re-merged their plugins!