-
-
Notifications
You must be signed in to change notification settings - Fork 6.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Wireframes in mermaid #1184
Comments
Thanks for approving this issue! Maybe I can help by discussing a MVP for wireframes in mermaid? The basic elements are:
See example copied from
Try this example in https://www.planttext.com/ |
@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? |
@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. |
@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? |
ImagineUI looks very complete. |
@v4dkou PR away! |
@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 |
One at a time should be fine |
@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://github.com/lowdefy/lowdefy
Having said all of the above... I'm fully supportive of an imagineui based wireframe diagram type in mermaid as a first version. |
This would be amazing! |
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? imagineui/imagineui#8 Hit me up at vadkou@wave909.com 🙏 |
Hey everyone, just following up, is there anyone working on this? |
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.
The text was updated successfully, but these errors were encountered: