Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Has Mermaid a graphical interface to make diagrams? #668

Closed
Nahuel92 opened this issue Jun 3, 2018 · 37 comments · Fixed by #4174
Closed

Has Mermaid a graphical interface to make diagrams? #668

Nahuel92 opened this issue Jun 3, 2018 · 37 comments · Fixed by #4174

Comments

@Nahuel92
Copy link

Nahuel92 commented Jun 3, 2018

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!
@gvlx
Copy link

gvlx commented Jul 13, 2018

@Nahuel92, is this related to #674 ?

@Nahuel92
Copy link
Author

@gvlx Maybe.
What I need to do is a open source web diagramming editor that will be used in a tool for teachers to help blind students in the university I'm attending.
Particularly, what I need is a web diagramming editor like Visio but not as complex and I'm going crazy because I don't know how to do it and don't have anyone to ask for.
That's why I'm asking this here, because I'm using Mermaid in another feature of this tool, which is make diagrams from text.
Sorry for my bad english, I'm not native english speaker.

@gvlx
Copy link

gvlx commented Jul 16, 2018

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
It is not web (at some point it was a Firefox extension) but it is quite light.

https://github.com/lewish/asciiflow2 could also be a solution.

@Nahuel92
Copy link
Author

Thank you @gvlx I'll check that.

@szacchino
Copy link

if online editor is an option, try https://www.draw.io/
if not you can look at https://www.yworks.com/products/yed

@Nahuel92
Copy link
Author

@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!!

mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022
@dependabot
chore(deps): bump node from 17.5.0 to 17.6.0 (mermaid-js#668)
fcfb915 
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] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
@jpl-jengelke
Copy link

if online editor is an option, try https://www.draw.io/ if not you can look at https://www.yworks.com/products/yed

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.

@thefill
Copy link

thefill commented Sep 6, 2022

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 ;)

@ted-marozzi
Copy link
Contributor

ted-marozzi commented Feb 4, 2023 •
edited
Loading

Hi,
I have begun working on an interactive and visual mermaid js diagram GUI editor.

https://www.mermaidflow.app

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!

@aeroflydesign
Copy link

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.

@dnlmc
Copy link

dnlmc commented Feb 28, 2023

@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

@ted-marozzi
Copy link
Contributor

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:

  1. The ability to import the code into the editor via pasting or file. This should cause the UI to update and match the code.
  2. The ability to edit the code and have the UI update in real time.
  3. The ability to edit the UI and have the code update in real time. (I just implemented this today, give the page a refresh and let me know if its working for you)
  4. The ability to export the code, link to diagram UI and diagram image (This should have already been working let me know if not)

Cheers!

@dnlmc
Copy link

dnlmc commented Mar 1, 2023 •
edited
Loading

@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!

@ted-marozzi

This comment was marked as resolved.

Sign in to view
@ted-marozzi

This comment was marked as resolved.

Sign in to view
@dnlmc
Copy link

dnlmc commented Mar 2, 2023

@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.

@dnlmc
Copy link

dnlmc commented Mar 2, 2023

@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

@ted-marozzi

This comment was marked as resolved.

Sign in to view
@ted-marozzi ted-marozzi mentioned this issue Mar 2, 2023
Merged
4 tasks
@ted-marozzi
Copy link
Contributor

ted-marozzi commented Mar 3, 2023 •
edited
Loading

@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! :)

www.mermaidflow.app

@dnlmc
Copy link

dnlmc commented Mar 3, 2023

@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!

@ted-marozzi

This comment was marked as resolved.

Sign in to view
@dnlmc
Copy link

dnlmc commented Mar 3, 2023

@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).

@ted-marozzi
Copy link
Contributor

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!

@dnlmc
Copy link

dnlmc commented Mar 4, 2023

@ted-marozzi awesome, will do!

@ted-marozzi
Copy link
Contributor

@dnlmc and @aeroflydesign I created a PayPal Donation link as requested!

@dnlmc
Copy link

dnlmc commented Mar 4, 2023

@ted-marozzi donated!

@ted-marozzi
Copy link
Contributor

@ted-marozzi donated!

@dnlmc very kind and generous! Thank you.

@danielo515
Copy link

This is the closest thing I found: https://marketplace.visualstudio.com/items?itemName=corschenzi.mermaid-graphical-editor

@ted-marozzi
Copy link
Contributor

Hey @danielo515, have you tried Mermaid Flow does it not meet your needs in some way?

@danielo515
Copy link

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:

  • not all types are supported, and I use mermaid for more than flowcharts
  • I don't like using the mouse for everything, specially since in mermaid you have a fixed layout. I would prefer to select the next kind of node to insert, then be present with a list of attachment points and just pick one. The more keyboard friendly the better.

Thanks for your interest

@ted-marozzi
Copy link
Contributor

Thank you for the feedback! Thats very helpful, more diagrams are in the pipeline, but I think 100% keyboard support is a great idea!

@ted-marozzi
Copy link
Contributor

ted-marozzi commented Oct 17, 2023 •
edited
Loading

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!

@danielo515
Copy link

danielo515 commented Oct 17, 2023 via email

@ted-marozzi
Copy link
Contributor

Cheers @danielo515, I have replied, sometimes it gets put in spam so you may have to check there.

@BleedingDev
Copy link

Looking forward to Mermaid Flow, just wrote a message @ted-marozzi. Would love to integrate it as part of the other app. :)

@huynhicode
Copy link
Member

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.

@anthony-sap
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: expose the diagram api ted-marozzi/mermaid