Isoflow Charts
Isoflow is a powerful tool for creating interactive flow diagrams and architecture visualizations. This documentation explains how to embed isoflow charts in your markdown documents.
[!CAUTION] Important: Remove Icons Before Embedding
When creating isoflow charts, make sure to remove all icons from your chart before embedding it in the documentation. Icons increase the chart size unnecessarily. Only include the essential flow structure and connections.
Creating Charts
You can create isoflow charts using the online editor at: https://stan-smith.github.io/FossFLOW/
This web-based tool provides an intuitive interface for:
- Creating flow diagrams
- Adding nodes and connections
- Configuring chart layouts
- Exporting chart data
Embedding Charts in Markdown
To embed an isoflow chart in your markdown document, use a codeblock with isoflow tag and the chart JSON data:
```isoflow
{
"nodes": [
{
"id": "node1",
"position": { "x": 100, "y": 100 },
"data": { "label": "Start" }
},
{
"id": "node2",
"position": { "x": 300, "y": 100 },
"data": { "label": "End" }
}
],
"edges": [
{
"source": "node1",
"target": "node2"
}
]
}
```
Example Chart
{
"title": "Untitled Diagram",
"colors": [
{
"id": "blue",
"value": "#0066cc"
},
{
"id": "green",
"value": "#00aa00"
},
{
"id": "red",
"value": "#cc0000"
},
{
"id": "orange",
"value": "#ff9900"
},
{
"id": "purple",
"value": "#9900cc"
},
{
"id": "black",
"value": "#000000"
},
{
"id": "gray",
"value": "#666666"
}
],
"items": [
{
"id": "a94eb3b4-a624-443a-bf63-45e183e90612",
"name": "Central CDN",
"icon": "aws-cloudfront"
},
{
"id": "b9a41e1f-f3ad-45a8-b7cc-69aa325da1d0",
"name": "4.0 Fargate",
"icon": "aws-lambda"
},
{
"id": "d08ff912-4c65-4f53-a12a-0d91d35b711e",
"name": "4.0 Fargate",
"icon": "aws-fargate"
},
{
"id": "9fa6754c-38f3-45ae-acd9-e12b731d3b31",
"name": "Browser",
"icon": "desktop"
}
],
"views": [
{
"name": "Untitled view",
"items": [
{
"labelHeight": 80,
"id": "9fa6754c-38f3-45ae-acd9-e12b731d3b31",
"tile": {
"x": -6,
"y": 2
}
},
{
"labelHeight": 80,
"id": "d08ff912-4c65-4f53-a12a-0d91d35b711e",
"tile": {
"x": 2,
"y": 1
}
},
{
"labelHeight": 80,
"id": "b9a41e1f-f3ad-45a8-b7cc-69aa325da1d0",
"tile": {
"x": 2,
"y": 3
}
},
{
"labelHeight": 80,
"id": "a94eb3b4-a624-443a-bf63-45e183e90612",
"tile": {
"x": -2,
"y": 2
}
}
],
"connectors": [
{
"id": "42a8e652-458b-4a95-a21a-ebc540b7a55f",
"color": "blue",
"anchors": [
{
"id": "00b23d60-3f14-4e25-b1fd-4a1ea37b6af9",
"ref": {
"item": "9fa6754c-38f3-45ae-acd9-e12b731d3b31"
}
},
{
"id": "2e931ea5-6172-4ecb-9feb-1d38c75f5296",
"ref": {
"item": "a94eb3b4-a624-443a-bf63-45e183e90612"
}
}
]
},
{
"id": "868de2cc-6a0f-482a-b40d-4c683a55084e",
"color": "blue",
"anchors": [
{
"id": "70e11b9b-4875-4fad-aaed-4bd6d7e4447f",
"ref": {
"item": "a94eb3b4-a624-443a-bf63-45e183e90612"
},
"ordering": 0
},
{
"id": "e3d42171-b29f-4eba-9f95-722033016b4e",
"ref": {
"tile": {
"x": -1,
"y": 2
}
},
"ordering": 1
},
{
"id": "0f61a346-1856-4fe0-93d4-73ad0e34bd5e",
"ref": {
"item": "d08ff912-4c65-4f53-a12a-0d91d35b711e"
},
"ordering": 4
}
],
"width": 10,
"description": "",
"style": "SOLID",
"path": {
"tiles": [
{
"x": 5,
"y": 1
},
{
"x": 4,
"y": 1
},
{
"x": 3,
"y": 1
},
{
"x": 3,
"y": 1
},
{
"x": 2,
"y": 2
},
{
"x": 1,
"y": 2
}
],
"rectangle": {
"from": {
"x": 3,
"y": 3
},
"to": {
"x": -3,
"y": 0
}
}
}
},
{
"id": "00f6adc7-f8a7-4211-8758-95c26deb9a59",
"color": "blue",
"anchors": [
{
"id": "a018e321-7313-4e19-8239-25b8e45fb169",
"ref": {
"item": "a94eb3b4-a624-443a-bf63-45e183e90612"
},
"ordering": 0
},
{
"id": "ffd72f19-6018-4854-a86c-cd53254f9041",
"ref": {
"tile": {
"x": -1,
"y": 2
}
},
"ordering": 4
},
{
"id": "fe8868c0-f880-4e3a-85d4-29c1cfff81c2",
"ref": {
"item": "b9a41e1f-f3ad-45a8-b7cc-69aa325da1d0"
},
"ordering": 5
}
],
"width": 10,
"description": "",
"style": "SOLID",
"path": {
"tiles": [
{
"x": 6,
"y": 1
},
{
"x": 5,
"y": 1
},
{
"x": 4,
"y": 1
},
{
"x": 3,
"y": 1
},
{
"x": 3,
"y": 1
},
{
"x": 2,
"y": 1
},
{
"x": 1,
"y": 1
}
],
"rectangle": {
"from": {
"x": 3,
"y": 3
},
"to": {
"x": -4,
"y": 1
}
}
}
}
],
"rectangles": [
{
"id": "e60a8222-4f6e-44f4-8d89-034088707513",
"color": "purple",
"from": {
"x": -3,
"y": 5
},
"to": {
"x": -1,
"y": 0
}
},
{
"id": "2ae3d47c-b978-471d-a6a6-3a35c596d8f8",
"color": "orange",
"from": {
"x": 1,
"y": 5
},
"to": {
"x": 3,
"y": 0
}
}
],
"textBoxes": [],
"id": "2a810479-df7c-4c43-adae-02b3475deb97",
"lastUpdated": "2025-07-22T07:58:05.534Z"
}
],
"fitToScreen": true
}
Chart Features
Interactive Elements
Embedded isoflow charts support several interactive features:
- Click to fullscreen: Click anywhere on the chart to view it in fullscreen mode
- Explorable mode: In fullscreen, you can explore the chart in detail
- Responsive design: Charts automatically adapt to container size
Best Practices
Chart Creation
- Keep it simple: Focus on the essential flow and connections
- Remove icons: Always remove icons before exporting (as mentioned in the warning above)
- Use clear labels: Make node labels descriptive but concise
- Optimize layout: Arrange nodes for maximum clarity
Documentation Integration
- Provide context: Add descriptive text before and after charts
- Use meaningful titles: Give your charts descriptive headings
- Consider mobile: Ensure charts are readable on smaller screens
- Test thoroughly: Always preview your charts before publishing
Performance Considerations
- Chart size: Keep chart data minimal for faster loading
- Number of charts: Avoid embedding too many charts on a single page
- Browser compatibility: Charts work in modern browsers with JavaScript enabled