[New Doc 📑]: create EDA architecture diagram for Docs Overview page

[quetzalliwrites]

What Dev Docs changes are you proposing?

As part of the work towards the Docs issue of designing a NEW Docs /Overview landing page, we would like to include an EDA architecture diagram above the fold. (This proposal originally came from https://github.com/asyncapi/website/issues/503.)

While @mcturco has been amazing enough to confirm excitement in this proposal and in contributing towards the design part, we both agree we need a deeper engineering perspective from the broader community to determine what that diagram should include.

Tagging some more contributors we'd love to hear from for this: @fmvilas @smoya @derberg @jonaslagoni @boyney123

• [ ] Collect community engineering feedback for EDA diagram
• [ ] Team w/ design contributor(s)

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[boyney123]

Hey @alequetzalli ,

I like the idea 💯

What kind of diagram would you be looking for? EDA diagram with links to AsyncAPI on it, or just a general EDA diagram for now?

I assumed maybe a general EDA diagram for now considering where this will be in the docs (intro/welcome page), guess it's good to start at the high level before going into AsyncAPI etc etc....

Or maybe even a couple?

• EDA general diagram
• How AsyncAPI fits into the EDA general diagram

Think either way it needs to be simple to understand, nothing to busy/confusing. Don't wanna scare people away 😅

[mcturco]

@boyney123 that's a great idea to have a "before AsyncAPI" diagram that explains EDAs in general and then to have a second diagram that is a "using AsyncAPI" visual on how the spec fits into that process 🎉 I think that could possibly squash a lot of the initial confusion of what AsyncAPI is and why it is better to use the spec in your EDA process. (This is just what I have digested over the past couple months of learning AsyncAPI, so correct me if I am wrong in my explanation 😄 )

What do you think @alequetzalli??

Would also love to get some feedback from more contributors anyways before we make a decision, but I think this is a great first bit of feedback 🙌

[quetzalliwrites]

@mcturco @boyney123 Thank you dave for starting off the convo!! I really like your ideas and I feel like you really got it. I completely agree with you that it should be basic and not scare people away 🤣

Missy, I like the idea of showing what it's like to apply asyncAPI... tbh, I feel less confident in this area so I am hoping to hear more opinions and learn what others think about it. 🙃✌🏽 Question, I notice we seem to be talking about having to diagrams… Are you thinking about adding two diagrams to the overview page or how do you think it could be useful? 🤔

[mcturco]

@alequetzalli Absolutely!! So I think we can get clever with the "2 diagrams" thing and it could maybe be a GIF animation or SVG animation if we make the visuals simple enough So we can keep the diagram all in one space! But definitely would love to hear what others think first

[quetzalliwrites]

@mcturco Ooooh, an animated diagram! Daaaamn, that sounds both fancy and useful! I want to upvote this idea 😄👍🏽👍🏽👍🏽👍🏽👍🏽

[fmvilas]

Showing the two diagrams in one space gave me the idea of doing this: https://codesandbox.io/s/react-image-comparison-evpeu.

[mcturco]

Copying this from slack so it can stay in our discussion :)

from: @boyney123 This is quite interesting (thanks @Fran Méndez sharing) This diagram is quite interesting (although quite technical), but it actually helps me understand messages, channels, routing, and endpoints.... Wonder if this kind of diagram (simplified ofc) could help people understand AsyncAPI spec (our channels, messages etc etc). cc: @Missy Turco Diagram I'm talking about https://www.enterpriseintegrationpatterns.com/patterns/messaging/

[quetzalliwrites]

Copying this from slack so it can stay in our discussion :)

from: @boyney123 This is quite interesting (thanks @fran Méndez sharing) This diagram is quite interesting (although quite technical), but it actually helps me understand messages, channels, routing, and endpoints.... Wonder if this kind of diagram (simplified ofc) could help people understand AsyncAPI spec (our channels, messages etc etc). https://www.enterpriseintegrationpatterns.com/patterns/messaging/

I love this!

[derberg]

/gfi docs

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart: