Reference FES Contributor Docs inside FES Directory along with a diagram to understand usages of FES functions

[Ayush23Dash]

Changes:

Reference FES Contributor Docs inside FES Directory along with a diagram to understand usages of FES functions.

Screenshots of the change:

NOTE
I have added a link to the flowchart of the diagram in Readme itself

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated

[Qianqianye]

Thanks @Ayush23Dash for making the flow chart and updating the FES contributor doc.

I'm wondering if we can explore an alternative way to add the flow chart instead of inserting a still image, so it'd be easier to be edited in the future by other contributors, eg. we can try to 'draw' the flow chart in code. How about a solution like Mermaid? What do you think? @almchung @nbriz

[almchung]

@Qianqianye Mermaid looks super cool, thank you for the suggestion! I believe this PR is a working draft (please confirm, @Ayush23Dash?). We were also discussing the layout and which tool to use for rendering it. As for now, we were thinking about starting a draft following the format of core's README and iterating on it. However, I totally agree that having the diagram in code rather than a static image will make more sense for long-term maintenance.

[nbriz]

yea @Qianqianye, this PR is still in progress @almchung + @Ayush23Dash && i discussed some revisions in our last meeting. re:the chart, the decision to use https://sketchboard.me was based on the fact that it was also used in the README @almchung referenced. we all agreed that a chart which could be generated from code would be easier to keep up to date, but didn't want to introduce new tools to the project/process. that said, if the p5.js wanted to adopt something like Mermaid from now on for charts/diagrams like this, i think choosing an open source tool that generates charts from text/code is also the way to go.

[nbriz]

@Ayush23Dash i hope i'm not getting too nit-picky, but the text appears v small && hard to read on my end, i wonder if there's a way to zoom in a bit or maybe bring the boxes closer together (there seems to be a lot of negative space at the moment). i realize contributors could always click on the image to open it in a new tab && then zoom in, but as a quick reference it would be best to make this legible within the README on first glance. what do u think @almchung maybe it's just my screen, how does it look on urs?

[Ayush23Dash]

Thanks for the review @nbriz!! I think it definitely makes sense to make it readable at the first glance! I will try to look out for a way to make it zoomed in and more readable!

[Ayush23Dash]

Hi @nbriz , I have updated the flowchart with the following changes :

• Reduced spacing between boxes
• The long column of files in the first box(validate_params.js) is reduced to two columns for easier readability!

[Qianqianye]

Thanks @Ayush23Dash for working on it. @nbriz and @almchung, please let us know if you have any comments. Thank you!

[almchung]

As we discussed before, it would be great to scale down the size of the root (title) note to give more space for downstream nodes with the information. However, I'm also okay with merging the current version so anyone can iterate after this. Thank you for your contribution this summer, @Ayush23Dash!