Webpack documentation can get a little text heavy at times. As discussed in several other threads (eg. #349), adding illustrations and screenshots would help add visual relief.

Starting with the concepts site section, we can identify critical topics that would benefit from visualisations, and I could help make them. After we identify such topics, I will post the graphic as a issue / PR which we can then discuss. I can make the final edits accordingly.

As a proof of concept, I made the following graphic for the "Entry" section in concepts.

entry-graph copy

I've kept the style very casual and informal, which should help with webpack's image of being "tough" and "not beginner friendly".

I'd love to hear which sections we should concentrate on, and if someone has a neat idea for a graphic, feel free to post, even if its a screenshot of a hand-drawn pencil sketch. It's going to prove to be very helpful.

Update

It seems we've all agreed on mermaid and we already have a few charts started stemming from various issues. Here's what it sounds like is needed to push it this forward:

• Figure out how to integrate Mermaid in our build/mardown-processing system.
• Finalize styling (hopefully we can get close to @pastelsky's design above).
• Include @rouzbeh84's webpack graph somewhere.
• Include this decision tree either in the shimming guide or a concepts page.
• Potentially create a flow chart like the one in API - Compilation Lifecycle #169 somewhere in the API section.