How to insert a custom flow chart at the end of the overview page in Stoplight elements documentation?

Question

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": "graham@gmail.com"
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        },
        "/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": "graham@gmail.com"
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            },
            "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?