Thanks @pksjce. Though including inline images in the current markdown setup wouldn't be a straightforward task. We'll probably have to host these images on webpack.js.org's server before we can link them in the markdown.

@bebraw @skipjack @SpaceK33z what do you guys think? should I go forward with this?

@pastelsky Yeah, sure. Would it be possible for you to share the style (push to webpack/media) so it's easier to keep it consistent across the documentation? #473 is related to this.

I wonder if it would be possible to create a nice style for graphviz. That would allow even coders to generate nice graphics.

@bebraw Sure. I can share the textures, fonts and shapes used. Although the graphic will still have to be created manually in a vector editor like sketch. I do not know much about graphviz.

@pastelsky Essentially graphviz is based on a text based tree definition. It renders the images for you. Taken far enough it would be possible to make it so that you can write the definitions within Markdown and the system will render them as images while applying the project specific style.

The big advantage of going through a definition based approach like this is that then it's easier to get something consistent looking. You lose some power since it does the layout for you.

@pastelsky looks great, yea I definitely think we should go forward with this. I agree with @bebraw that enforcing a consistent style would be best (whatever method we choose for that). This is something @jhnns and I discussed a while back in regards to displaying modules in graphs/illustrations. He might be a good person to discuss this with as well -- any thoughts @jhnns?

My thoughts on the graphic style is that it would not work well as SVG, due to the grungy smudges. Where possible all logos and diagrams should be SVG. I suggest changing the watercolor fills to a flat color, the borders should be ok as outlines.

@pastelsky Another option, https://github.com/knsv/mermaid . We could integrate that to markdown quite easily.

mermaid is pretty cool! got it started here mermaidGraph but it could definitely use some styling love haha.

i can get back at it tomorrow a bit though. Would love to look into it a bit further as a nested graph may not be best option but I was trying to emulate the image as best I could (thanks @pastelsky!)

yea, sorry i didn't get a chance to style it up more. it does allow for pretty easy CSS styling though so it can be quite easily styled if you check out the bottom of the code in the link.

Related: #473

@skipjack very related. I think mermaid is a very cool to for this kind of stuff. FYI the link above for the image is still live here

@rouzbeh84 yeah and I'm definitely glad you started playing around with it -- this would be an awesome thing to push forward when we can.

Another related one: #487

Mermaid with custom styling looks pretty good. If we can get a good color scheme to go with all of the diagrams, that would be great.

I was also thinking about @jaydenseric's point about the grungy look:

My thoughts on the graphic style is that it would not work well as SVG, due to the grungy smudges. Where possible all logos and diagrams should be SVG. I suggest changing the watercolor fills to a flat color, the borders should be ok as outlines.

Seeing as it's just an SVG, we should be able to do this using a single "grungy" png for the background that's used in each element with a different color filter, but only loaded once. Although maybe I've overlooked something about how mermaid works.

something like this could be a cool alternative to mermaid: https://www.jointjs.com/

@hulkish jointjs looks pretty awesome! do you know if they have a less expensive a.k.a free plan for OSS? I only saw a trial offered on their pricing page.

@rouzbeh84 good question, I looked at this a while ago and was wondering the same thing. Also, I think there are some benefits to having a simpler text-based solution. I think it would be fairly easy to write a remark plugin (once we move to remark) that could use mermaid under the hood (e.g. remark-mermaid).

Working on porting to remark now (and a variety of other things) on the rebuild branch. And... looks like somebody beat us to the chase with a remark-mermaid plugin! I'll install and test it out on that branch.

Rebuild branch was merged some time ago, @pastelsky Are you still interested in adding these diagrams?