Show HN: An online collaborative UML editor using PlantUML | Hacker News Reader

Show HN: An online collaborative UML editor using PlantUML

collabuml.com

116 pointsAlexITC33 comments

Hi,

I built CollabUML after the need to work on designing systems with my peers, instead of screensharing, it's simpler to go into a website and start collaborating, it saves bandwidth which can be a problem sometimes, and it allows your peers to do edits instead of just telling you want to modify.

After thinking a bit and talking with people, looks like it can be useful for system design interviews.

I'm still thinking how to evolve it, if you have any ideas, let me know.

Be aware that anyone can go to any board, hence, avoid placing private information.

Thanks.

This is cool. Random idea: set up a Blockly[1] mode for using blocks to generate the PlantUML. Even more amazing if you have it bidirectional with a text mode!

[1] https://developers.google.com/blockly

Looks cool, is that open-source? I can't find the link to a repository anywhere...

Looks exactly like the [1] Scratch programming language IDE from MIT.

[1] https://scratch.mit.edu/

Blockly is definitely open source[1]. Scratch looks like Blockly because Scratch is now written with Blockly :)

[1] https://github.com/google/blockly

- use certbot from letsencrypt to setup https - you could start the app immediately without having to decide the name (e.g. assign a random name). Only when/if I want to share it, then I can think of a name

Thanks for the hint, I'm a frequent certbot user, I released this overnight and got a complication while mounting one of the servers and didn't bothered to fix it and just released the app.

Hopefully I'll apply this and other changes in the following days.

The HackMD version of CodiMD[1] also supports this, letting you collaboratively edit a PlantUML diagram embedded in a Markdown document.

[1]: https://github.com/hackmdio/codimd

Some improvement suggestions:

  * Implement shareable URLs (the session name should be in the URL).
  * Don't immediately prompt a session name but explain the purpose of the website.
  * Link the PlantUML documentation.

That's good to know, thanks for sharing, while useful, sometimes I just wanted to go into a website and start collaborating, which is one of the reasons I ended up building CollabUML.

I think you can accomplish this by using the URL, and it would be significantly cleaner than the input pop-up.

Instead of prompting for input, use URLs like http://collabuml.com/s/sessionName (the /s is just to give you some flexibility in the future, should you want to add other URLs to the site), or alternatively, for pure client-side, you could do http://collabuml.com/#sessionName.

For an example of how to do this using a landing page, check https://meet.jit.si/.

If you don't want a landing page, then when someone visits http://collabuml.com/ (with no session name) just immediately do a 302 redirect to a new randomly-generated "session name" URL. If a user wants to join an existing session, they need to use the URL directly (most likely clicking on a link the other person shares with them).

Thanks for the hints, I'm aware of such issues and actually want to take the session from the URL, I pushed this last night and was tired enough to not do more changes and just went straight to the plain-old prompt popup.

> I think you can accomplish this by using the URL, and it would be significantly cleaner than the input pop-up.

I just pushed a minor update to use the url for the session names.

Couldn't resist myself from modifying the default diagram.

  CollabUML -> You ++: Welcome to CollabUML, The collaborative UML editor
  return Sounds good, but How do I use it?
  CollabUML --> You : Just share the url with anyone
  CollabUML --> You : and start collaborating
  CollabUML -> You ++: It's very handy for designing systems with your peers
  return How does it works?
  CollabUML -> You ++: It's powered by https://plantuml.com \nBe sure to check their docs to see the wonderful things you can do\n Just like this sequence diagram
  return Awesome!

I get an error about the browser not supporting cookies. In the browser console I get this:

  A cookie associated with a cross-site resource at http://64.225.122.27/ was set without the `SameSite` 
  attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are 
  set with `SameSite=None` and `Secure`. You can review cookies in developer tools under 
  Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 
  and https://www.chromestatus.com/feature/5633521622188032.

Chrome Version 80.0.3987.163 (Official Build) (64-bit) on a Apple MacOS

Thanks for the report, I'll look into it soon.

I'm surprised as I and other users can run the app smoothly on Chrome.

I looked at one of the URLs https://www.chromestatus.com/feature/5088147346030592. It says:

  ******NOTE: There is currently a bug affecting Mac OSX and iOS 
  which causes SameSite=None cookies to be inadvertently treated 
  as SameSite=Strict and therefore not sent with cross-site 
  requests. (See https://bugs.webkit.org/show_bug.cgi?id=198181) 
  Until this is fixed, SameSite=None may not work properly on 
  Safari.******

Are all your Chrome users not MacOS and not iOS?

Yep and the latest update seems to have fixed it. Sorry. didnt mean to cause extra work.

Interesting, thanks for coming back, the simpler bugs are the ones you don't need to fix, aren't they? hehe.

All I am getting is :

    TypeError: pad.collabClient is null in http://64.225.122.27:9001/javascripts/lib/ep_etherpad-lite/static/js/pad.js?callback=require.define at line 3'

It is very likely that you have rules blocking the JavaScript on the site.

The only thing I have is an ad blocker. I tried to disable it, but the error persists...

Which browser are you using? I have tried on Firefox and Chrome.

Another cause could be a middle-man (like your ISP), as the site runs on http now.

Friendly tip: you should sanitize your inputs / ouput.

Thanks, also I need a TLS certificate and fix some other details, this was a PoC that got more attention than expected.

Well, I think you did a great job. (:

Thanks.

Cool idea! Really like UML and am sad that it doesn't get used as often as it should.

Thanks, it actually supports lots of diagrams, like wireframes and graphs in dot notation, check https://plantuml.com/ for more details and thank them, as their project is the great piece and I just gathered a couple of projects together.

I'm curious as to how it gets usernames as I never input that anywhere.

Right now, there are no names but auto generated ids.

The goal is to eventually let you choose a name and display who edited which pieces on the text.

Opened from a mobile and it doesn't seem to work.

Can you please add more details, like what are you experiencing?

It very likely depends on which browser you are using and it's resources (like the network speed), on wifi, it works on my phone on the Opera Mini. Firefox, and Chrome, while using Android.

I am pretty much experience nothing, that's the problem. ^^

Android mobile with Firefox. There is a small one centimeter tall picture at the bottom that's the diagram failing to render I suppose?

I got some users on the US experiencing similar issues, I plan to push an update in the following days to improve some details and hopefully will fix most issues.

If you like, send me an email (find it on my github) so that I can make sure the issue gets fixed.

Thanks for the patience.

Reply on news.ycombinator.com