[HN Gopher] Show HN: Gleek diagram maker - UML class, Sequence, ...
       ___________________________________________________________________
        
       Show HN: Gleek diagram maker - UML class, Sequence, ER diagrams,
       Flowcharts
        
       Author : vladojsem
       Score  : 42 points
       Date   : 2021-03-04 11:16 UTC (11 hours ago)
        
 (HTM) web link (www.gleek.io)
 (TXT) w3m dump (www.gleek.io)
        
       | alexf95 wrote:
       | Looks like a powerful Tool, are there any Tutorial videos showing
       | how to use it effectively?
        
         | vladojsem wrote:
         | thank you, i have just published the second tutorial video
         | today, please check the channel:
         | https://www.youtube.com/channel/UCMl_1_jjnhgPAsRBuJ0yzAA
        
           | alexf95 wrote:
           | Thanks i will check it out!
        
             | vladojsem wrote:
             | you are welcome, would be happy to hear your feedback
        
               | alexf95 wrote:
               | 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.
        
               | vladojsem wrote:
               | feel free to bookmark it ;-)
        
       | ta988 wrote:
       | 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?
        
         | vladojsem wrote:
         | 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.
        
           | vladojsem wrote:
           | 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.
        
       | clawoo wrote:
       | 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.
        
         | vladojsem wrote:
         | 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
        
       | colordrops wrote:
       | 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
        
         | vladojsem wrote:
         | 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 ;-)
        
       | [deleted]
        
       | mono-bob wrote:
       | 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
        
         | vladojsem wrote:
         | thank you very much. we are working on the fix - to clarify
         | pricing page.
        
       | jayonsoftware wrote:
       | 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
        
         | vladojsem wrote:
         | 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
        
       | kofejnik wrote:
       | 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.
        
         | ewokone wrote:
         | 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.
        
           | vladojsem wrote:
           | thanks for your comment. noted.
        
         | vladojsem wrote:
         | 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.
        
       | ducharmdev wrote:
       | 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.
        
         | gardenfelder wrote:
         | https://github.com/mermaid-js/mermaid
        
         | vladojsem wrote:
         | 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?
        
         | beaconstudios wrote:
         | or https://graphviz.org/, which is very mature and also FOSS.
        
           | vladojsem wrote:
           | i know graphviz. there are certainly many diagramming tools
           | out there. what do you like about graphviz that gleek.io does
           | not offer?
        
             | vladojsem wrote:
             | sure, thanks for highlighting the tool. i thought you were
             | a heavy-user of graphviz so you would have the insights ;-)
        
               | beaconstudios wrote:
               | No, but I am building my own graph based tools hence my
               | interest in the area.
        
             | nerdponx wrote:
             | 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.
        
               | vladojsem wrote:
               | 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.
        
             | specialist wrote:
             | 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.
        
               | vladojsem wrote:
               | give Gleek diagram maker a try and please send your
               | feedback
        
               | vladojsem wrote:
               | 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 :-/
        
               | specialist wrote:
               | Like other commenter, got stack errors. Sorry.
        
             | beaconstudios wrote:
             | 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.
        
               | philsnow wrote:
               | 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._
        
               | beaconstudios wrote:
               | 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.
        
       | vladojsem wrote:
       | 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
        
         | 2rsf wrote:
         | Why are you better than other existing tools in this niche?
        
           | vladojsem wrote:
           | 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.
        
             | 2rsf wrote:
             | sounds great, I will give it a try
        
               | vladojsem wrote:
               | please let me know your feedback after
        
       | Oras wrote:
       | 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.
        
         | Veuxdo wrote:
         | 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.
        
           | vladojsem wrote:
           | thanks, we will take a look at ilograph. did not hear about
           | it yet.
        
         | vladojsem wrote:
         | 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.
        
       | gegtik wrote:
       | 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?
        
         | vladojsem wrote:
         | 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 :-)
        
           | gegtik wrote:
           | 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
        
       | 3ace wrote:
       | 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...
        
         | vladojsem wrote:
         | 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.
        
       | swalsh wrote:
       | 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.
        
         | vladojsem wrote:
         | that is a great feedback, the tool is not for everyone. out of
         | curiosity, are you a developer?
        
       ___________________________________________________________________
       (page generated 2021-03-04 23:02 UTC)