
Show HN: An online collaborative UML editor using PlantUML - AlexITC
http://collabuml.com
======
AlexITC
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.

~~~
acbart
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](https://developers.google.com/blockly)

~~~
gitgud
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/](https://scratch.mit.edu/)

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

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

------
curlednetcat
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](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.

~~~
AlexITC
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.

~~~
gregmac
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](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](http://collabuml.com/#sessionName).

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

If you don't want a landing page, then when someone visits
[http://collabuml.com/](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).

~~~
AlexITC
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.

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

------
blm
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

~~~
AlexITC
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.

~~~
blm
I looked at one of the URLs
[https://www.chromestatus.com/feature/5088147346030592](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?

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

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

------
lovasoa
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'

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

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

~~~
AlexITC
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.

------
ifoundthetao
Friendly tip: you should sanitize your inputs / ouput.

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

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

~~~
AlexITC
Thanks.

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

~~~
AlexITC
Thanks, it actually supports lots of diagrams, like wireframes and graphs in
dot notation, check [https://plantuml.com/](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.

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

~~~
AlexITC
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.

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

~~~
AlexITC
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.

~~~
user5994461
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?

~~~
AlexITC
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.

