{"id":14384703,"url":"https://github.com/konsumer/gatsby-remark-graph","last_synced_at":"2025-03-16T10:32:05.192Z","repository":{"id":45924012,"uuid":"110765249","full_name":"konsumer/gatsby-remark-graph","owner":"konsumer","description":"Make nice graphs in your markdown files in gatsbyjs, using mermaid","archived":false,"fork":false,"pushed_at":"2023-06-17T07:21:22.000Z","size":87,"stargazers_count":45,"open_issues_count":1,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-23T04:17:47.386Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/konsumer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-11-15T01:07:26.000Z","updated_at":"2024-10-15T04:04:58.000Z","dependencies_parsed_at":"2024-01-14T20:17:35.821Z","dependency_job_id":"5f705b3a-2c77-4988-b34a-2eb6c0802b72","html_url":"https://github.com/konsumer/gatsby-remark-graph","commit_stats":{"total_commits":45,"total_committers":5,"mean_commits":9.0,"dds":0.1333333333333333,"last_synced_commit":"626dc637ae83c9dd0aa7c1fd4a49e1c6940b425e"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konsumer%2Fgatsby-remark-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konsumer%2Fgatsby-remark-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konsumer%2Fgatsby-remark-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konsumer%2Fgatsby-remark-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/konsumer","download_url":"https://codeload.github.com/konsumer/gatsby-remark-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221456101,"owners_count":16824943,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-28T18:01:36.002Z","updated_at":"2024-10-27T10:26:55.481Z","avatar_url":"https://github.com/konsumer.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# gatsby-remark-graph\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/konsumer/gatsby-remark-graph.svg)](https://greenkeeper.io/)\n\n[![Travis Status](https://travis-ci.org/konsumer/gatsby-remark-graph.svg?branch=master)](https://travis-ci.org/konsumer/gatsby-remark-graph)\n\nMake nice graphs in your markdown files in gatsbyjs, using [mermaid](https://mermaidjs.github.io/).\n\n[Here](https://remark-graph-demo.netlify.com/graphdemo) is a basic demo, which also uses my [starter template](https://github.com/konsumer/gatsby-starter-bootstrap-netlify/).\n\n## install\n\n`npm install --save gatsby-transformer-remark gatsby-remark-graph`\n\n\n## How to use\n\n```js\n// In your gatsby-config.js\nplugins: [\n  {\n    resolve: 'gatsby-transformer-remark',\n    options: {\n      plugins: [\n        {\n          resolve: 'gatsby-remark-graph',\n          options: {\n            // this is the language in your code-block that triggers mermaid parsing\n            language: 'mermaid', // default\n            theme: 'default' // could also be dark, forest, or neutral\n          }\n        }\n      ]\n    }\n  }\n]\n```\n\nMake sure you put it before other plugins (especially those that work with `code` blocks, like [prism](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/).)\n\n### Usage in Markdown\n\n    ```mermaid\n    graph LR\n        A[Square Rect] -- Link text --\u003e B((Circle))\n        A --\u003e C(Round Rect)\n        B --\u003e D{Rhombus}\n        C --\u003e D\n    ```\n\nWill give you a graph that looks like this:\n\n![diagram](graph.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonsumer%2Fgatsby-remark-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkonsumer%2Fgatsby-remark-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonsumer%2Fgatsby-remark-graph/lists"}