Has Mermaid a graphical interface to make diagrams? #668
Comments
|
@gvlx Maybe. |
|
Hi @Nahuel92, I don't know of a web project like that (except for a bpmn.io but it's BPMN specific). Maybe https://github.com/evolus/pencil could help https://github.com/lewish/asciiflow2 could also be a solution. |
|
Thank you @gvlx I'll check that. |
|
if online editor is an option, try https://www.draw.io/ |
|
@szacchino It have to be a web application, but it have to be open source because it's for my degree thesis and I can't afford expensive libraries licences. I'll check the options you commented to see if some of them help me. Thank you!! |
Bumps node from 17.5.0 to 17.6.0. --- updated-dependencies: - dependency-name: node dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Just FYI for anyone looking at this older ticket, neither of these products seem to support Mermaid, nor some of the others discussed on this page. The https://mermaid.live editor translates code to graphs in real time, but it's not a true GUI editor AFAICT. It just presents the graph that corresponds to what is typed. I could imagine that a GUI could be built for Mermaid but it would be strict in how things could be designed because it would have to conform to Mermaid's layout strategy. |
Which is not a problem for most application as from what I can see, Mermaid's is quite a capable beast. The only constraint would be in moving nodes and inability to draw free-floating elements like in draw.io. Not a biggie If you ask me ;) |
|
Hi, I have implemented most of the flow diagram spec and will start implementing other charts such as sequence and class diagrams. Let me know if you have any feedback or want to recommend the next Mermaid JS chart type to implement! Edit: As requested I have added a GitHub Sponsors and PayPal Donation link! If you use Mermaid Flow commercially I ask that you donate to support its development! |
|
omg @ted-marozzi THANK YOU. For 2 Month, i am searching for something like this. Please put in a little Paypalbutton on this site, to support you. Awesome. |
|
@ted-marozzi YES! been scouring the earth looking for a diagram-as-code + optional UI tool insane how rare / non-existent this seems to be. Would love to see an import as well as export function. (Would love even more to be able to edit via code + UI at the same time). Also would love to pay / support this project! Structurizr used to have a UI, but they retired it. The only tool I'm currently aware of which does code + UI editing simultaneously is https://onlinewardleymaps.com/ , but thats a very narrow mapping use case & limited shapes etc |
|
Thanks for the support all I really appreciate it and I am happy you are finding it useful! @dnlmc please correct me if I have misunderstood but I believe the features you want ideally are:
Cheers! |
|
@ted-marozzi yes to all !! Except # 4 , which I already understood to work & is indeed working for me Also great to see # 3 working now! But yes, # 1 & 2 would make this maximally useful to me (assuming eventual support for all / most of Mermaid's functionality). I still hit a wall with Mermaid overall due to the lack of custom / manual layout etc (hoping for some traction on something like #2483 ), but this goes along way towards making it a more generally viable system imo! |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
|
@ted-marozzi amazing! also great to hear there might be movement on custom layouts! my use cases are multiple & varied: i mostly work with small nontechnical social impact orgs & nonprofits, doing tech & data consultation. I'm always looking for tools which balance tradeoffs between best practice for technical users (e.g. *-as-code) & accessibility for nontechnical stakeholders, collaborators, & folks who might inherit solutions after our engagement ends. I don't want to saddle them with tech-debt they can't maintain or pay down, & also don't want to expend billable hours on suboptimal, high-LOE tools (e.g. GUI-only) which aren't reproducible, version-controllable, automatable, are prone to lock-in, etc. More concretely, when it comes to documentation & general communication, I tend to eschew visual formats (e.g. digital whiteboards, graphics & diagrams etc) even when they'd be the highest impact & throughput options, simply due to concerns mentioned above re: LOE & anti-patterns. The tradeoffs generally aren't worth it / tenable. A tool like this which balances technical best-practice with nontechnical accessibility would lower the threshold where those tradeoffs become tenable. |
|
@ted-marozzi also, re: general awareness of this tool, I'll definitely be sharing it, even more as it becomes more feature-rich! I also wonder if Mermaid maintainers would be up for mentioning it in the official docs, either as an experimental integration or elsewhere |
This comment was marked as resolved.
This comment was marked as resolved.
|
@dnlmc I have implemented initial support for 1 and 2. It is technically a very challenging (and interesting) problem so I expect bugs and edge cases that I have missed. Please report any issues you hit! :) |
|
@ted-marozzi amazing!!!! i just played around with it a bit & its working well!! only bug I noticed is sometimes the code editor gets a parse error & then gets "stuck" on it & further code edits won't take (even to fix the error), but I've found that interacting with the UI will "reset" the code editor & then can make edits again. this is so good & I'm gonna start putting this to serious use! I definitely think this deserves to be mentioned in the official docs too , & its development supported however possible! (also please add a ko-fi or github sponsorship option etc!) but yea I believe you re: the technical challenges, & imagine that is why so few of these tools exist. here's the structurizr developer discussing why he ended support for the graphical UI (which did not support realtime code + UI editing, I don't think): https://twitter.com/simonbrown/status/1428272961778237440 the only other tool I could find is https://onlinewardleymaps.com/ as mentioned, but again but narrower use case & capabilities thanks for your fast & amazing work on this! |
This comment was marked as resolved.
This comment was marked as resolved.
|
@ted-marozzi thanks! the only other I'd mention, is when it isn't sure how to parse some code or the feature isn't supported in the UI (e.g. subgraphs or tooltips or diagram themes), it initially renders correctly in the Export preview, but then the code gets stripped out when you interact with the UI. (Also seems like image downloads might get broken when this happens, & the dialogue never pops up, even after that code is stripped). |
|
Perfect thanks again @dnlmc. I will eventually add support for these features and that first issue will go away. I think image download is broken yes will also look into that. Just to avoid clogging up this issue i have created a public repo for people to file issues with Mermaid Flow: https://github.com/ted-marozzi/mermaid-flow-feedback/issues/new/choose If you have a feature request or bug leave it there! |
|
@ted-marozzi awesome, will do! |
|
@dnlmc and @aeroflydesign I created a PayPal Donation link as requested! |
|
@ted-marozzi donated! |
@dnlmc very kind and generous! Thank you. |
|
This is the closest thing I found: https://marketplace.visualstudio.com/items?itemName=corschenzi.mermaid-graphical-editor |
|
Hey @danielo515, have you tried Mermaid Flow does it not meet your needs in some way? |
Yes, I tried it already, and doesn't git my needs, although it is more visually pleasant. Some of the things that I miss are:
Thanks for your interest |
|
Thank you for the feedback! Thats very helpful, more diagrams are in the pipeline, but I think 100% keyboard support is a great idea! |
|
Hey @danielo515, I am working on a new version of Mermaid Flow that will be alike the link you posted. I will however support all diagram types, create a much nicer user experience and also have strong keyboard support for a super slick user experience. If you are willing, I would love to for you to reach out to me here where we could arrange for you to beta test and shape the direction of this new editor. In return you will get a product that you like and some free Mermaid Flow credits! |
|
Sure! Will contact you there
…On Tue, Oct 17, 2023 at 9:58 AM Ted Marozzi ***@***.***> wrote:
Hey @danielo515 <https://github.com/danielo515>,
I am working on a new version of Mermaid Flow that will be alike the link
you posted. I will however support all diagram types, create a much nicer
user experience and also have strong keyboard support for a super slick
user experience.
If you are willing, I would love to for you to reach out to me here
<https://www.mermaidflow.app/contact> where we could arrange for you to
beta test and shape the direction of this new editor.
—
Reply to this email directly, view it on GitHub
<#668 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AARKJWLPL5J6YL6A7RZW4U3X7Y3BFAVCNFSM4FDA6472U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCNZWGU4DONBTGA2A>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
--
---
https://danielorodriguez.com
|
|
Cheers @danielo515, I have replied, sometimes it gets put in spam so you may have to check there. |
|
Looking forward to Mermaid Flow, just wrote a message @ted-marozzi. Would love to integrate it as part of the other app. :) |
|
Happy to see a community project get such positive feedback! Well done, @ted-marozzi with Mermaid Flow! I wanted to share that Mermaid Chart (built by the team behind Mermaid JS) has released a Visual Editor if you wanted to also check it out. Mermaid Chart's Visual Editor feature enables users of all skill levels to create flowcharts easily and efficiently, with both GUI and code-based editing options. We will be supporting additional diagrams with future iterations. Read more about it in our latest BLOG post, visit our DOCS site, and watch a DEMO VIDEO on our YouTube page. |
|
Will there be an option to add the Visual Editor from Mermaid Chart to another product e.g. via package? Is this kind of licensing considered? |
Hi everybody!! Hope you're fine.
I love this project and I'm currently using it to make diagrams from text but I'm wondering if Mermaid has any mechanism to allow making diagrams with a graphical interface (like Visio or Draw for example).
If so, can you show me some example?
This feature is very useful but only I found the Mermaid editor which, as much as I understood, only shows what you input in text.
Thanks in advance.
Regards!
The text was updated successfully, but these errors were encountered: