Monthly Archives: September 2016

Swagger.ed for graphical visualization of APIs

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.

swagger.ed chrome extension

swagger.ed chrome extension

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.

Screen Shot 2016-09-06 at 12.42.37 AM

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).

swagger.ed-enabled

swagger.ed-enabled

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

swagger.ed

swagger.ed

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.

Student Model type

Student Model type

Here is the view when we selected Student service.

Student Service

Student Service