Show HN: Gleek diagram maker – UML class, Sequence, ER diagrams, Flowcharts | Hacker News Reader

Show HN: Gleek diagram maker – UML class, Sequence, ER diagrams, Flowcharts

gleek.io

56 pointsvladojsem57 comments

Most comments addressed why it would be better than plantuml and mermaid. If you can add a feature to export the diagram as a GIF with animation to show the sequence, this would be a great feature IMHO.

Why I see animation as a vital feature:

- This would give clarity to both developers and product owners.

- When there is a new feature in the system, it will be easier to add change and export.

- Easily embed in README files.

- To my knowledge, this feature is not available in any diagram software.

thank you much for your suggestion. it sounds interesting. we did not think of including a GIF animation before.

we are going to talk about it during our next planning.

Ilograph has interactive sequence diagrams that can walk you through the sequence, with notes: https://app.ilograph.com/demo.ilograph.Ilograph/Get%2520Diag...

(click the 'Start Walkthrough' button on the right)

Exporting it to a gif is an interesting idea. That could be a very big gif file though.

thanks, we will take a look at ilograph. did not hear about it yet.

Hello HN,

my friends and I made Gleek.io - a diagram maker focused on speed - typing code is much faster than drag-and-drop - for developers, it is more natural to write than to draw - generate a diagram with connections

The features of Gleek.io include: - 16 different shapes to use - Various connections based on the diagram type - Diagrams saved locally in a browser as well as on Gleek.io servers - Dashboard with the overview of your diagrams with the option to search - Free Templates (type /) and Syntax help to make it easier to start - Rotation of the diagram, SVG download of a diagram, diagram link sharing, fit to screen layout

Create your first diagram in Gleek.io & write your feedback

Example to try: Type "Shape1-->Shape2" for your first diagram

Why are you better than other existing tools in this niche?

the difference is in the syntax, some other tools allow to create just one type of diagram, like sequence - we have wider options in terms of diagram types.

typing should be faster and more natural for developers and software architects - so speed is a big advantage in comparison with drag-and-drop tools.

sounds great, I will give it a try

please let me know your feedback after

Although your UX looks a bit more appealing, this is what you are competing with: https://mermaid-js.github.io/mermaid-live-editor

So when determining your price point, you need to provide a fairly substantial service on top of this to justify a monthly cost. Particularly when you're targeting developers and architects, who are more likely to use free open-source alternatives even if the UX is not as good.

fair point. we are going to rework pricing in the following weeks.

there are many differences to the mermaid. i have mentioned them in the comments already / saving of the diagrams, unified syntax throughout various diagram types, diagram code autocomplete, templates, integrations with azure devops and confluence.

what other paid feature would you wish for?

or https://graphviz.org/, which is very mature and also FOSS.

i know graphviz. there are certainly many diagramming tools out there. what do you like about graphviz that gleek.io does not offer?

That's a backwards mentality. I already use Graphviz, why would I switch? You need to be asking yourself (and convincing everyone else) what Gleek offers that Graphviz does not offer.

Also, in the USA, "gleeking" is a very specific kind of spitting, by projecting saliva from under the tongue. Not what I want to think about when making diagrams.

i understand your point. i was just asking what do you appreciate on the other tool - as i expected you know that tool better than gleek.io diagram maker. we will certainly look closer on graphviz.

Why is the unsanitary name, "gleek", used?

"Like spitting with one's tongue, we make it easy to spit out diagrams" ?

(NSFW) animated illustration: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F...

I don't know, I don't tend to use graphs for documentation or communication. I just wanted to highlight the tool that is probably your main competitor given the parent was talking about open source comparisons. Presumably you have a pitch for why gleek is superior to graphviz or other alternatives to justify the pricing?

FWIW I do like the real time preview; manipulating symbols in the dark is the worst thing about textual languages.

In emacs, M-x global-auto-revert-mode. in a shell:

    while inotifywait -e modify -r .; do sleep 0.5; make; done

load up the .dot file and the output .png file side by side in an emacs frame. Every time you save the .dot file, the inotifywait loop rebuilds the output .png, writes it to disk, and then emacs notices that the file on disk is newer than its buffer so it "reverts" (reloads) it.

There's even a bit more you can do, with flymake-mode. With flymake-mode, the buffer you're working on gets saved to a separate filename every time you stop editing it for a few ms. If your makefile is set up right, it will build an output file from the temporary flymake file, so you can have that resulting "temporary" artifact open as the other emacs buffer and get automatic refreshing every time you stop typing.

This workflow works for nearly anything you can edit in emacs, as long as you can write a makefile. I wrote everything in grad school this way.

I think VS Code has something even nicer preview (no manual setup or dinking around in a shell) for some plugins, but I don't know if it's general like this setup is.

Edit: Though, this setup has the perennial problem of anything involving emacs: it's completely single-player. I can't easily collaborate with anybody while using this workflow. I also can't really touch any part of it while I'm on my phone. SaaS web/mobile apps can do those things, so they might be more applicable depending on the situation.

I think you underestimate how lazy I am.

If it was something I did often, I would probably make a vscode plugin or shell macro for it though. Or just use mermaid if it turns out to be good.

sure, thanks for highlighting the tool. i thought you were a heavy-user of graphviz so you would have the insights ;-)

No, but I am building my own graph based tools hence my interest in the area.

I recently had to create a handful of class diagrams. To document existing stuff, vs as a design tool. Just the level of detail needed to make the point.

It's been ages since I've done UML stuff. Surely things are better now?

I tried a handful of tools. PlantUML, whatever comes with IntelliJ Ultimate, something that had recently been front page on HN (edit: dotuml.com), mermaid, nomnoml, an app I found on the Apple Mac store. I even tried just a generic diagramming tool.

So frustrating. Overlapping edges and arrowheads. Couldn't control placement or order. Classes with just names (no fields or methods) still showing those extra lines (vs just a name with a box). Couldn't discern abstract (italics) from concrete (bold) classes.

I gave up.

I was tempted to just hand draw the diagrams. Alas, my lettering is turrible.

I finally went back to wrestling with graphviz's DOT.

It's not great. But at least the edges don't overlap.

give Gleek diagram maker a try and please send your feedback

Like other commenter, got stack errors. Sorry.

specialist, can you pls connect with me? @IoGleek

we would like to look into your error, can be browser-based, sometimes even browser extensions can do nasty things :-/

https://github.com/mermaid-js/mermaid

This looks nice, congrats!

However, it makes zero sense to me as a 13 euro/mo service. It is just a single-purpose tool which I need occasionally, so I might be inclined to pay something like $10 for it, once. But monthly payment? Maybe if you're systems analyst at IBM and creating UML diagrams is literally your job.

thank you. this is also valuable feedback!

we are going to play with the pricing in the following weeks, and the most probably decrease the price.

Same here. Free tier with limitations of 40 elements? .. useless to me, next tier 13 dollar per month? Way to much for 2-3 layouts I want to produce spontaneously and irregularly.

I would love a gitlab plugin which creates new layouts based on all module imports in a repository. to get an overview like a dependencies graph. For that I would pay instantly.

thanks for your comment. noted.

Two comments about "prior art":

- This reminds me of plantuml and mermaid: how do you see yourself as different? Is it the reactive display of contents as you type?

- Naming-wise: I'm curious - are you aware that in some places "Gleek" means to spit by directly squeezing your salivary glands?

yes, the tool is partly based on the mermaid, we use our own syntax that we consider more simple + features build on top of it like diagram saving, git repository integration, exporting options, link sharing, support, etc.

you are right. i am aware that name is somewhat controversial. in a way, you type quickly your diagram and gleek.io spits it out :-)

I Love the idea of these but I feel like we need much better pathing before medium-or-larger diagrams are presentable. Anything not trivial in nature ends up with fairly ugly and unintuitive layout that requires correction.

Maybe a job for ML

Maybe It's just me, but I think the free tier description on the pricing page [1] is confusing.

- (CHECK) Use the full set of Gleek diagramming features

- (CROSS) Limited to 5 diagram files

- (CROSS) Limited to 40 diagram object

- (CROSS) Diagrams are stored on Gleek servers

- (CROSS) Share links to diagrams using your favorite collaboration tool

- (CROSS) Priority support on Slack

There are checkmarks and crosses. The first item seems clear because it had a checkmark and is included in the free tier. But it seems to me that the next two items (limited to 5 diagram files and 40 diagram object) are also included, but they have a cross next to them. While the last two items also have a cross but are not included.

Lastly, I think there is a small typo and the "40 diagram object" should be "40 diagram objects."

Good luck!

[1] https://www.gleek.io/pricing.html

Edit: fixed formatting

thank you very much. we are working on the fix - to clarify pricing page.

pricing page is fixed, it should be more clear now

How does that differ from mermaid, plantuml and the myriad of others?

Do you protect your clients in any way for the risk of loosing diagrams if your company goes down the drain?

i like plantuml. however, i think it has more complicated syntax. if i mistype something, i often get an error.

gleek.io is partly based on mermaid, it has its own UI and extra features like saving diagrams on its servers, Git integration, link sharing, integration with Azure DevOps, integration with Confluence is on the way, etc.

i don't see the company going down the drain, it is only one of our projects and not so expensive to maintain. the diagrams are saved on the servers and you can export them in different formats.

mermaid also has different syntax for each diagram type.

gleek.io is unifying the syntax throughout different diagram types so that you don't have to learn the syntax from the beginning again.

Reading the pricing detail for free tier at a glance is a little bit of confusing because of the icon and font color used on certain feature, I had to read the next tier to (probably) understand it further.

Is the free tier limited to 4 diagrams? Is the free tier limited to 40 diagrams? Is the free tier permit the user to save the diagram on Gleek server? and so on...

yes, we are re-working the pricing page, it is going to include also FAQ.

to answer your questions: yes, the free tier is limited to 5 diagram files and 40 diagram objects.

the free tier has diagrams saved in the local IndexDB database of the browser. paid tier has them saved on the servers.

I'm a really visual person, so I love making diagrams to explain my ideas. Unfortuantely I can't "think" while i'm typing. In fact, I can't really think while I'm in front of a computer. I usually draw everything out on a dry erase white board.

This could solve my second problem, which is to take my drawings and convert them into something presentable and consumerable by other people. But this is not my ideal way to do it. Ideally, I could take a picture of the white board, and it would be auto generated.

that is a great feedback, the tool is not for everyone. out of curiosity, are you a developer?

A bit out of context for the broader discussion but your comment caught my eye. Try ShareTheBoard.com as a solution to your second problem. You can digitize your white board contents in real time (and save them at any moment). Let me know if you get a chance to use it. Thanks in advance.

First of all I do not mind paying for it, end of the day I do not want to set up things (Server, Docker etc), I just played with it for 10 min.

1. For some reason "Syntax Error" kept popping up. 2. The UI need some work...look at Lucid Chart 3. Having an API will so we can call from other apps 4. Just PNG is not enough, may be add SVG

I am happy to get on a 30 min zoom call and discuss all this as I tried to create some thing like this using DS3 last year. Feel free to ping me at @jayonsoftware

Jay

thanks, jay. sure lets connect: @IoGleek

it would be helpful to know more details about 1. and 2., we already have SVG implemented - more export options are available for paid users

Maybe I am missing something, but I'm having difficulty figuring out what a proper diagram definition is supposed to look like.

You could take inspiration from plantuml-editor (https://plantuml-editor.kkeisuke.com/#) and add a template/demo button that allows user to get a predefined diagram so they can experiment with it.

you can just type / for a template, or use these links for pre-defined diagrams:

https://app.gleek.io/diagrams/basic https://app.gleek.io/diagrams/sequence https://app.gleek.io/diagrams/erdiagram https://app.gleek.io/diagrams/class

there is also syntax help link in the bottom-left corner

your feedback is great, we should make it more clear on how to start

Looks like a powerful Tool, are there any Tutorial videos showing how to use it effectively?

thank you, i have just published the second tutorial video today, please check the channel: https://www.youtube.com/channel/UCMl_1_jjnhgPAsRBuJ0yzAA

Thanks i will check it out!

you are welcome, would be happy to hear your feedback

Actually looks pretty simple to use especially if you have some kind of coding affinity. When the next diagram making is needed I hope I'll remember your Tool.

feel free to bookmark it ;-)

Where I grew up (Inland Empire in Southern California), gleek was slang for spitting droplets of water from under your tongue. I'd never be able to dissociate the name from this. Similar to people who associate Gimp with certain things.

https://youtu.be/BV4ZeNvXfhk

thanks for the insight. i am using gimp software and never thought about it means something bad. i might reconsider and use different graphic product instead ;-)

Barely related, but I feel like OP or commenters will know.

What’s this, realtime live preview/hot reload of text to diagram called?

Reply on news.ycombinator.com