Wireframes in mermaid

[3esmit]

I used to write wireframes in text instead of drawing them because dealing with images in documentation is horrible.

Would be interesting if mermaid supported something similar as available in PlantUML https://plantuml.com/salt

Would be good overall if mermaid used the same syntax as possible for this, making future interoperability easier.

[3esmit]

Thanks for approving this issue! Maybe I can help by discussing a MVP for wireframes in mermaid?

The basic elements are:

• label: simply text;
• button: text surrounded by brackets;
• radio button: like in markdown;
• checkbox: like in markdown;
• text input: text between double quotes;
• drop down: text between;
• panel with invisible borders: multiple lines (under indentation) surrounded by starting line with open bracket and ending line with close bracket;
• panel with borders: like above, but starting line contains a bracket and a plus {+.

See example copied from plantuml.com/salt:

@startsalt
{
  Just plain text
  [This is my button]
  ()  Unchecked radio
  (X) Checked radio
  []  Unchecked box
  [X] Checked box
  "Enter text here   "
  ^This is a droplist^
}
@endsalt

Which should render:

Try this example in https://www.planttext.com/

[jgreywolf]

@3esmit While this has been approved, the core team is not working on new diagram types at this very moment. This is available for anyone that would like to contribute to take on though. Are you interested?

[v4dkou]

@3esmit I've been working on a similar project (text-to-wireframes toolkit) a year or two ago and have encountered a fundamental problem. It's very tricky to relay positional information in text, without degrading into common HTML/CSS, which I would consider not that friendly to the non-programmer users of tools like Mermaid (i.e. Business Analysts, UX Designers, etc.)

I hope it doesn't come across as shilling my project, but I would love to discuss syntax for element positioning, as I think it would be beneficial to everyone who wants to achieve text-based wireframes. https://github.com/imagineui/imagineui/issues/8

[v4dkou]

@jgreywolf Now that I think of it, my project is architecturally quite similar (Web-based renderer, Puppeteer-based CLI)

Would you be interested in integrating ImagineUI as a Diagram type in Mermaid? I'm willing to send a PR if so.

[3esmit]

ImagineUI looks very complete.

[jgreywolf]

@v4dkou PR away!

[v4dkou]

@jgreywolf Awesome, I've had some work on ImagineUI scheduled this April, and being able to integrate it into Mermaid is actually a clean solution for a lot of things I had to do!

Question: does my PR has to align with a PR to mermaid-live-editor, or can I do these two PRs one at a time?

[jgreywolf]

One at a time should be fine

[bhazzard]

@v4dkou I would be a user of such a mermaid integrated diagram. I actually evaluated imagineui and am very impressed with what you built. I did run into some limitations though, as you said, jumping down into positional details quickly becomes reinventing html. So imagine doesn't try to do that. The downside is that the rows/columns only works if are willing to accept the default, and for me that usually meant simply not doing anything with rows or columns.

I'd love if a future version of the mermaid wireframe diagram type took inspiration from the best parts of:

https://plantuml.com/salt

• The syntax is clean & simple
• it handles grid layout stuff pretty well
• The wireframe can be embedded into other diagrams like flow diagrams
• Butt ugly. No styling potential

https://imagineui.netlify.app

• Blocks, rows, columns are great for simple layout
• Handdrawn style

https://utext.github.io

• Some cool syntax ideas
• Most beautiful rendering (just html + bootstrap)
• Would need to render to svg/png though
• Doesn't handle blocks or other layout stuff

https://github.com/lowdefy/lowdefy

• not really a wireframe syntax... its a no/low-code yaml syntax for building apps...
• but a small subset of the syntax ideas could be useful for inspiring future improvements to the mermaid wireframe syntax.
• Would be cool if it was a fully compatible subset of the syntax so that your wireframes could be the first step in a Lowdefy based functional prototype

Having said all of the above... I'm fully supportive of an imagineui based wireframe diagram type in mermaid as a first version.

[adibkadir]

This would be amazing!

[v4dkou]

I'd really love to push this through, but a bit hesitant to solidify something like ImagineUI's current syntax within Mermaid

Does anybody want to have regular conversations to solve precise block positioning? https://github.com/imagineui/imagineui/issues/8

Hit me up at vadkou@wave909.com 🙏