How to create diagrams on GitHub
Post GitHub mermaid, geojson, topojson, stl, and vega-lite fences via gh --body-file, then prove stored identifiers with gh issue view --json.
What this covers
Creating diagrams shows four diagram syntaxes you embed as code fences. This is Markdown in the editor. Type the fence, paste the diagram source, click Preview. Companion fence basics: Creating and highlighting code blocks.
| Syntax | Fence tag | Typical output |
|---|---|---|
| Mermaid | mermaid | Flow charts, sequence diagrams, pie charts, and more |
| GeoJSON | geojson | Interactive map from coordinates / features |
| TopoJSON | topojson | Interactive map from topology arcs |
| ASCII STL | stl | Interactive 3D model |
Mermaid
Mermaid turns text into diagrams (Mermaid documentation). Use the mermaid language identifier:
Here is a simple flow chart:```mermaidgraph TD; A-->B; A-->C; B-->D; C-->D;```Check the Mermaid version GitHub uses
```mermaid info```Run that sample in Preview when you need to confirm which Mermaid features the platform currently supports.
GeoJSON and TopoJSON maps
Fence with geojson or topojson for interactive maps.
GeoJSON example
```geojson{ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 1, "properties": { "ID": 0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [-90,35], [-90,30], [-85,30], [-85,35], [-90,35] ] ] } } ]}```TopoJSON example
```topojson{ "type": "Topology", "transform": { "scale": [0.0005000500050005, 0.00010001000100010001], "translate": [100, 0] }, "objects": { "example": { "type": "GeometryCollection", "geometries": [ { "type": "Point", "properties": {"prop0": "value0"}, "coordinates": [4000, 5000] }, { "type": "LineString", "properties": {"prop0": "value0", "prop1": 0}, "arcs": [0] }, { "type": "Polygon", "properties": {"prop0": "value0", "prop1": {"this": "that"} }, "arcs": [[1]] } ] } }, "arcs": [[[4000, 0], [1999, 9999], [2000, -9999], [2000, 9999]],[[0, 0], [0, 9999], [2000, 0], [0, -9999], [-2000, 0]]]}```Working with .geojson / .topojson files on GitHub: Working with non-code files.
ASCII STL 3D models
Fence with stl:
```stlsolid cube_corner facet normal 0.0 -1.0 0.0 outer loop vertex 0.0 0.0 0.0 vertex 1.0 0.0 0.0 vertex 0.0 0.0 1.0 endloop endfacet facet normal 0.0 0.0 -1.0 outer loop vertex 0.0 0.0 0.0 vertex 0.0 1.0 0.0 vertex 1.0 0.0 0.0 endloop endfacet facet normal -1.0 0.0 0.0 outer loop vertex 0.0 0.0 0.0 vertex 0.0 0.0 1.0 vertex 0.0 1.0 0.0 endloop endfacet facet normal 0.577 0.577 0.577 outer loop vertex 1.0 0.0 0.0 vertex 0.0 1.0 0.0 vertex 0.0 0.0 1.0 endloop endfacetendsolid```See also Working with non-code files for .stl uploads.