Page 1 of 6
HTML+JavaScript diagram builder
Posted: Wed Mar 20, 2013 2:39 pm
by HermanHiddema
There was some talk recently of people wishing there was an easier way to create diagrams.
Presenting:
http://hiddema.nl/diagrammer/(beta version, no guarantees, this was only tested in Firefox)
Easy access to the full scala of what is available in the SL diagram format used here, with easy to copy/paste output.
Try it out!
Some tips:
- You can drag any corner or edge of the board to resize the view port, thus creating partial board diagrams.
- Clicking the stone with 1 on it on the far right of the toolbar changes the starting color.
- Move numbers move up automatically (but can be set manually). Right-click the last move to undo it.
- When the tool is the blac stone, right click makes white stones, and vice-versa.
Also, if you want to try a different size board, add #WxH after the url (e.g.
http://hiddema.nl/diagrammer/#9x9 for 9x9)
Bug reports & feature requests welcome!
Future features already planned:
- Change the starting move number
- Easier board size change
- Paste existing diagrams to initialize
- Turn on/off coordinates markers
- Maybe create diagrams from SGF (for now, there is
http://senseis.xmp.net/tools/sgf2diagram.php for that).
Let me know what you think!

Re: HTML+JavaScript diagram builder
Posted: Wed Mar 20, 2013 5:40 pm
by mw42
That's really fantastic. Thanks!
Re: HTML+JavaScript diagram builder
Posted: Wed Mar 20, 2013 7:05 pm
by ez4u
Wonderful!

Just what I had in mind.
Quickie - How about a 'clear all' button for the idiots among us?
Not so quickie maybe - What would it take to make it work with the touch screen on an iPad?
Re: HTML+JavaScript diagram builder
Posted: Wed Mar 20, 2013 7:42 pm
by Kirby
You, my friend, are awesome.
Re: HTML+JavaScript diagram builder
Posted: Wed Mar 20, 2013 10:12 pm
by Mage
Thanks ! It's very nice

Re: HTML+JavaScript diagram builder
Posted: Thu Mar 21, 2013 1:13 am
by tj86430
Excellent!
Some suggestions for further development, if I may:
- possibility to "import" a diagram in output format
- labels could (optionally) increment a->b->c etc as markers do
- stones without labels could (optionally) alternate colors (as stones with markers do)
Re: HTML+JavaScript diagram builder
Posted: Thu Mar 21, 2013 1:15 am
by tj86430
ez4u wrote:Quickie - How about a 'clear all' button for the idiots among us?
And by "idiot" you mean those who don't know that reloading the page accomplishes that?
Re: HTML+JavaScript diagram builder
Posted: Thu Mar 21, 2013 1:51 am
by ez4u
tj86430 wrote:ez4u wrote:Quickie - How about a 'clear all' button for the idiots among us?
And by "idiot" you mean those who don't know that reloading the page accomplishes that?
Exactly! For people like me.

Re: HTML+JavaScript diagram builder
Posted: Thu Mar 21, 2013 2:18 am
by HermanHiddema
ez4u wrote:Wonderful!

Just what I had in mind.
Quickie - How about a 'clear all' button for the idiots among us?
Not so quickie maybe - What would it take to make it work with the touch screen on an iPad?
Well, first I'd have to get an iPad.
But seriously, I'll put it on the list and look into it.
Re: HTML+JavaScript diagram builder
Posted: Thu Mar 21, 2013 2:21 am
by HermanHiddema
tj86430 wrote:Excellent!
Some suggestions for further development, if I may:
- possibility to "import" a diagram in output format
- labels could (optionally) increment a->b->c etc as markers do
- stones without labels could (optionally) alternate colors (as stones with markers do)
- Import was already on the wish list. That one is important, as often people will be responding to other's diagrams.
- Incrementing labels automatically sounds like a good idea, I'll put it on the list.
- I prefer the current left click -> black, right click -> white thing, but I could make it a preference setting.
Re: HTML+JavaScript diagram builder
Posted: Thu Mar 21, 2013 3:26 am
by xed_over
HermanHiddema wrote:Some tips:
- You can drag any corner or edge of the board to resize the view port, thus creating partial board diagrams.
- Clicking the stone with 1 on it on the far right of the toolbar changes the starting color.
- Move numbers move up automatically (but can be set manually). Right-click the last move to undo it.
- When the tool is the blac stone, right click makes white stones, and vice-versa.
Also, if you want to try a different size board, add #WxH after the url (e.g.
http://hiddema.nl/diagrammer/#9x9 for 9x9)
can you put these tips directly on that page?
Re: HTML+JavaScript diagram builder
Posted: Thu Mar 21, 2013 3:34 am
by tj86430
HermanHiddema wrote:- I prefer the current left click -> black, right click -> white thing
That's fine too, I had missed that.
Of course, having more preferences is always positive (as long as they are easy to find and use)
Re: HTML+JavaScript diagram builder
Posted: Thu Mar 21, 2013 4:02 am
by murksomat
Great tool, but I can't use the pasted output because there are linefeed in there. I am using firefox on a linux system.
Re: HTML+JavaScript diagram builder
Posted: Thu Mar 21, 2013 4:33 am
by HermanHiddema
@xed_over: I've added a "show help" tab at the top.
@murksomat: I see what you mean. Fixed!
@ez4u: Can you check whether it works on the iPad now?
Re: HTML+JavaScript diagram builder
Posted: Thu Mar 21, 2013 5:19 am
by daal
This is really very good. Next step is to integrate it into L19...