I have a backend API providing data for documentation in OpenAPI JSON format. This is how the API data looks right now:
{
"openapi": "3.0.0",
"info": {
"title": "Express API docs :D",
"version": "1.0.0",
"description": "This is the docs I'm creating for the project and stuff",
"license": {
"name": "Licensed Under MIT",
"url": "https://fakeurl.org/licenses/MIT.html"
}
},
"servers": [
{
"url": "http://localhost:3000",
"description": "Development server"
}
],
"paths": {
"/api/contacts": {
"get": {
"summary": "get all contacts.",
"responses": {
"200": {
"description": "All contacts retrieval successful"
}
}
},
"post": {
"summary": "Create a new contact",
"responses": {
"201": {
"description": "Created a new contact",
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"data": {
"type": "object",
"properties": {
"number": {
"type": "integer",
"description": "The user ID.",
"example": 0
},
"name": {
"type": "string",
"description": "The user's name.",
"example": "Leanne Graham"
},
"email": {
"type": "string",
"description": "The user's email.",
"example": "[email protected]"
}
}
}
}
}
}
}
}
}
}
},
"/api/contacts/:id": {
"get": {
"summary": "get a contact",
"responses": {
"200": {
"description": "Single contact retrieval successful"
}
}
},
"put": {
"summary": "update a contact",
"responses": {
"201": {
"description": "Updated a contact",
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"data": {
"type": "object",
"properties": {
"number": {
"type": "integer",
"description": "The user ID.",
"example": 0
},
"name": {
"type": "string",
"description": "The user's name.",
"example": "Leanne Graham"
},
"email": {
"type": "string",
"description": "The user's email.",
"example": "[email protected]"
}
}
}
}
}
}
}
}
}
},
"delete": {
"summary": "delete a contact",
"responses": {
"200": {
"description": "Delete contact request successful"
}
}
}
}
},
"components": {},
"tags": []
}
I'm using stoplight/elements
and React to create a frontend view which looks like this as of now:
Since I'm using stoplight/elements
, its code is pretty much like this as of now:
function App() {
return (
<div className="App">
<p>Hello World!</p>
<API
apiDescriptionUrl={`http://localhost:5001/docs`}
hideTryIt="true"
/>
</div>
);
}
export default App;
Now, I want to add a flow chart at the end of the overview page (the image above) like this:
How can I do that? Is there any way so that the flow chart would be automatically generated (perhaps using React)? If not, and if the only way is to insert an image, how can I insert an image at the end?