Swagger.ed for graphical visualization of APIs
Swagger.ed is a chrome extension available for graphical display for our APIs exposed using swagger specification. The extension is directly available in Chrome Web Store. The package is offered by Chris Spiliotopoulos.

If the extension is successfully installed, it displays these message. Plus an icon is available in toolbar to show an API visualization if browser has a swagger description already loaded.

Let’s use this extension to view graphical display of our Student API created in the last post [http://www.alternatestack.com/development/app-development/swagger/]. As we load the API in chrome, the extension’s toolbar button becomes enabled (turns green).

As we click the toolbar button, the following view is displayed:

This displays the list of API controllers available in the swagger specification. It also gives details about Model classes available through the APIs. Here we have StudentsController and ValuesController, so we see two services being available. Additionally, we are exposing two model classes Student and Exception. The view also supports panning. Clicking a node displays the details about the item. Here we have selected Student model class. Here is the description of Student type.

Here is the view when we selected Student service.