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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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...
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
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.
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.
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.
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 ;-)
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."
58 comments
[ 2.8 ms ] story [ 101 ms ] threadmy 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
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.
- 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?
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 :-)
Maybe a job for ML
Do you protect your clients in any way for the risk of loosing diagrams if your company goes down the drain?
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.
gleek.io is unifying the syntax throughout different diagram types so that you don't have to learn the syntax from the beginning again.
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.
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
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.
we are going to play with the pricing in the following weeks, and the most probably decrease the price.
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.
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.
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?
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.
"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...
FWIW I do like the real time preview; manipulating symbols in the dark is the worst thing about textual languages.
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.
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.
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.
we would like to look into your error, can be browser-based, sometimes even browser extensions can do nasty things :-/
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.
we are going to talk about it during our next planning.
(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.
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...
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.
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
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
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.
https://youtu.be/BV4ZeNvXfhk
- (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
What’s this, realtime live preview/hot reload of text to diagram called?