AsyncAPI specification structure visualizer

[derberg]

Just throwing idea, I will not be actively developing during the hackathon. Feel free to pick this one up

I once bumped into this OpenAPI-related project -> http://openapi-map.apihandyman.io/

It would be a great support tool for the AsyncAPI community to learn the specification.

Some facts that would make it a killer feature:

• It is a reusable react component that can be embedded inside AsyncAPI website, in the docs (website is Next.js project) but also others could use it in other applications
• information about a given part of the AsyncAPI spec is not hardcoded in the component but taken from spec file but most probably from the JSON Schema (yes it needs more love using description property)
• you can use this component with any AsyncAPI spec version
• you somehow see not only spec explorer for version B but also what is new in it comparing to version A. Yup, this is probably a hardcore stretch objective for the idea 😅

[NektariosFifes]

I might create this and also include it in the upcoming simulator desktop application. Any particular framework you would prefer this to be built in? d3.js etc. Or do you want vanilla react?

[derberg]

most important is to have it embeddable in the website as it is part of the AsyncAPI learning path.

If this is a reusable react component, web component, or d3.js with react - this is, I would say, secondary.

It could be a separate repo, called like spec-explorer or something, maybe outcome can also be exported to PWA.....or maybe in addition we should host it also as an individual view on explorer.asyncapi.com?

...and actually, my "website" requirement can be completely invalid, I might be wrong and there is some better way of doing it, some more modern approach. Here I just share my idea, whoever picks it up -> sky is the limit 😄

[KhudaDad414]

I am interested in this idea. Was just going through the JSON Schema. for the description I think we have two options:

1. somehow link each component from JSON Schema using extensions to it's spec file description.

(maybe some script that merges these two files can do the trick?)

2. add those descriptions to the description field as markdown and parse them into HTML.

any other option or idea?

[derberg]

Imho we should just duplicate descriptions from spec inside the description property in the respective location. Duplication will not be a big deal, we will just require that whenever some description is improved in the spec, it must be also done in the json schema.

[arjungarg07]

When I was first introduced to AsyncAPI, I tried to understand the async specification which led me to build this diagram (though not complete :) )manually for the ease of understanding, and am loving now that a similar thing is being proposed as an idea to be built. Would love to brainstorm more on this and will try to build a tool for it.

[BOLT04]

your diagram is pretty cool 💯 !