Awesome

magento2-less-diagram

This is a diagram I've made in 2019 to help me understand how Magento less import and compilation worked and debugging issues at the same time. I've spent a whole day on it, going through every .less file, trying to wrap my head around it.

Since then probably additional changes have been made to the file structure that might make this diagram obsolete, but it could still be helpful to others that are approching Magento for the first time or are still puzzled by its styling structure - luckly there are tools like Hyva that will make your life easier, but if you're "stuck" with the base, this may come in handy!

Please feel free to fork it and make it yours, update it or make a better version of it

Hot to use it:

I've used draw.io to makethis diagram, so you can import into it and export into other, preferable formats.