{"meta":{"title":"Creating diagrams","intro":"Create diagrams to convey information through charts and graphs","product":"Get started","breadcrumbs":[{"href":"/en/get-started","title":"Get started"},{"href":"/en/get-started/writing-on-github","title":"Writing on GitHub"},{"href":"/en/get-started/writing-on-github/working-with-advanced-formatting","title":"Work with advanced formatting"},{"href":"/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams","title":"Create diagrams"}],"documentType":"article"},"body":"# Creating diagrams\n\nCreate diagrams to convey information through charts and graphs\n\n## About creating diagrams\n\nYou can create diagrams in Markdown using four different syntaxes: mermaid, geoJSON, topoJSON, and ASCII STL. Diagram rendering is available in GitHub Issues, GitHub Discussions, pull requests, wikis, and Markdown files.\n\n## Creating Mermaid diagrams\n\nMermaid is a Markdown-inspired tool that renders text into diagrams. For example, Mermaid can render flow charts, sequence diagrams, pie charts and more. For more information, see the [Mermaid documentation](https://mermaid-js.github.io/mermaid/#/).\n\nTo create a Mermaid diagram, add Mermaid syntax inside a fenced code block with the `mermaid` language identifier. For more information about creating code blocks, see [Creating and highlighting code blocks](/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks).\n\nFor example, you can create a flow chart by specifying values and arrows.\n\n````text\nHere is a simple flow chart:\n\n```mermaid\ngraph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;\n```\n````\n\n![Screenshot of a rendered Mermaid flow chart with four lavender boxes labeled A, B, C, and D. Arrows extend from A to B, B to D, A to C, and C to D.](/assets/images/help/writing/mermaid-flow-chart.png)\n\n> \\[!NOTE]\n> You may observe errors if you run a third-party Mermaid plugin when using Mermaid syntax on GitHub.\n\n### Checking your version of Mermaid\n\nTo ensure GitHub supports your Mermaid syntax, check the Mermaid version currently in use.\n\n````text\n```mermaid\n  info\n```\n````\n\n## Creating GeoJSON and TopoJSON maps\n\nYou can use GeoJSON or TopoJSON syntax to create interactive maps. To create a map, add GeoJSON or TopoJSON inside a fenced code block with the `geojson` or `topojson` syntax identifier. For more information, see [Creating and highlighting code blocks](/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks).\n\n### Using GeoJSON\n\nFor example, you can create a map by specifying coordinates.\n\n````text\n```geojson\n{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"id\": 1,\n      \"properties\": {\n        \"ID\": 0\n      },\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n              [-90,35],\n              [-90,30],\n              [-85,30],\n              [-85,35],\n              [-90,35]\n          ]\n        ]\n      }\n    }\n  ]\n}\n```\n````\n\n![Screenshot of a rendered GeoJSON map of the southeastern United States with a purple rectangular overlay over parts of Alabama and Mississippi.](/assets/images/help/writing/fenced-geojson-rendered-map.png)\n\n### Using TopoJSON\n\nFor example, you can create a TopoJSON map by specifying coordinates and shapes.\n\n````text\n```topojson\n{\n  \"type\": \"Topology\",\n  \"transform\": {\n    \"scale\": [0.0005000500050005, 0.00010001000100010001],\n    \"translate\": [100, 0]\n  },\n  \"objects\": {\n    \"example\": {\n      \"type\": \"GeometryCollection\",\n      \"geometries\": [\n        {\n          \"type\": \"Point\",\n          \"properties\": {\"prop0\": \"value0\"},\n          \"coordinates\": [4000, 5000]\n        },\n        {\n          \"type\": \"LineString\",\n          \"properties\": {\"prop0\": \"value0\", \"prop1\": 0},\n          \"arcs\": [0]\n        },\n        {\n          \"type\": \"Polygon\",\n          \"properties\": {\"prop0\": \"value0\",\n            \"prop1\": {\"this\": \"that\"}\n          },\n          \"arcs\": [[1]]\n        }\n      ]\n    }\n  },\n  \"arcs\": [[[4000, 0], [1999, 9999], [2000, -9999], [2000, 9999]],[[0, 0], [0, 9999], [2000, 0], [0, -9999], [-2000, 0]]]\n}\n```\n````\n\n![Screenshot of a rendered TopoJSON map of Indonesia, Singapore, and Malaysia with a blue point, a purple rectangular overlay, and blue zigzag lines.](/assets/images/help/writing/fenced-topojson-rendered-map.png)\n\nFor more information on working with `.geojson` and `.topojson` files, see [Working with non-code files](/en/repositories/working-with-files/using-files/working-with-non-code-files#mapping-geojson-files-on-github).\n\n## Creating STL 3D models\n\nYou can use ASCII STL syntax directly in markdown to create interactive 3D models. To display a model, add ASCII STL syntax inside a fenced code block with the `stl` syntax identifier. For more information, see [Creating and highlighting code blocks](/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks).\n\nFor example, you can create a simple 3D model:\n\n````text\n```stl\nsolid cube_corner\n  facet normal 0.0 -1.0 0.0\n    outer loop\n      vertex 0.0 0.0 0.0\n      vertex 1.0 0.0 0.0\n      vertex 0.0 0.0 1.0\n    endloop\n  endfacet\n  facet normal 0.0 0.0 -1.0\n    outer loop\n      vertex 0.0 0.0 0.0\n      vertex 0.0 1.0 0.0\n      vertex 1.0 0.0 0.0\n    endloop\n  endfacet\n  facet normal -1.0 0.0 0.0\n    outer loop\n      vertex 0.0 0.0 0.0\n      vertex 0.0 0.0 1.0\n      vertex 0.0 1.0 0.0\n    endloop\n  endfacet\n  facet normal 0.577 0.577 0.577\n    outer loop\n      vertex 1.0 0.0 0.0\n      vertex 0.0 1.0 0.0\n      vertex 0.0 0.0 1.0\n    endloop\n  endfacet\nendsolid\n```\n````\n\n![Screenshot of a 3D model of a blue pyramid on a grid of black lines. Options \"Wireframe\", \"Surface Angle\", or \"Solid\" appear at bottom.](/assets/images/help/writing/fenced-stl-rendered-object.png)\n\nFor more information on working with `.stl` files, see [Working with non-code files](/en/repositories/working-with-files/using-files/working-with-non-code-files#3d-file-viewer)."}