{"id":19483170,"url":"https://github.com/mmgrant73/flowchart","last_synced_at":"2026-05-05T11:32:17.456Z","repository":{"id":57400741,"uuid":"232961300","full_name":"mmgrant73/flowchart","owner":"mmgrant73","description":"This is a custom tree like flowchart web component (block element).  It was made using StencilJS It only has one  attribute that a user needs to set (tree).  The tree attribute is an array that represent the nodes on the tree. ","archived":false,"fork":false,"pushed_at":"2020-01-10T03:54:34.000Z","size":67,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-28T03:43:47.081Z","etag":null,"topics":["component","css","css3","custom-tree","flowchart","html5","javascript","stenciljs","tree-attribute","web","webpage"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmgrant73.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-10T03:53:41.000Z","updated_at":"2020-02-08T09:15:55.000Z","dependencies_parsed_at":"2022-09-05T03:01:31.613Z","dependency_job_id":null,"html_url":"https://github.com/mmgrant73/flowchart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mmgrant73/flowchart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Fflowchart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Fflowchart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Fflowchart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Fflowchart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmgrant73","download_url":"https://codeload.github.com/mmgrant73/flowchart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Fflowchart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269755487,"owners_count":24470536,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["component","css","css3","custom-tree","flowchart","html5","javascript","stenciljs","tree-attribute","web","webpage"],"created_at":"2024-11-10T20:13:53.903Z","updated_at":"2026-05-05T11:32:17.364Z","avatar_url":"https://github.com/mmgrant73.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)\n# FlowChart (Tree):\n\n### What is it?\nThis is a custom tree like flowchart web component (block element).  It was made using StencilJS It only has one \nattribute that a user needs to set (tree).  The tree attribute is an array that represent the nodes on the tree. \n \n For example the below array will product the below flowchart\n ```\n    tree = ['parent', ['child1',['grandchild1'], 'child2', 'child3']]\n ```\n\n![Alt text](https://github.com/mmgrant73/flowchart/blob/master/flowchart.png?raw=true \"Image-FlowChart\")\n\n[Click here for Demo](https://mmgrant73.github.io/flowchart/flowchart.html) \n\n### How to use it?\nIt is quite easy to use it on your webpage. Just follow the below steps:\n\n1. Install it from NPM using the following at the terminal \n\n```\n   npm install x-flowchart --save\n```\n\n2. Include the link to the script file that holds the this custom web component (reveal-box.js) near the bottom of \n   the body section of your webpage.  See below\n   \n```\n    \u003cscript src='node_modules/x-flowchart/dist/flowchart.js'\u003e\u003c/script\u003e\n```\n\n3.  Then use the custom element tags on your webpage.\n\n```\n    \u003cx-flowchart tree=\"['parent', ['child1',['grandchild1'], 'child2', 'child3']]\"\u003e\u003c/x-flowchart\u003e\n```\n\nNote: That is all you have to do to use this custom element.  There is an example HTML page (acronym.html) that shows how to use it.\n\n```\n    \u003c!DOCTYPE html\u003e\n    \u003chtml dir=\"ltr\" lang=\"en\"\u003e\n        \u003chead\u003e\n            \u003cmeta charset=\"utf-8\"\u003e\n            \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0\"\u003e\n            \u003ctitle\u003eStencil Component Starter\u003c/title\u003e\n\n            \u003cscript src='node_modules/x-flowchart/dist/flowchart.js'\u003e\u003c/script\u003e\n\n        \u003c/head\u003e\n        \u003cbody\u003e\n\n            \u003cx-flowchart tree='[\"parent\", [\"child1\",[\"grandchild1\"], \"child2\", \"child3\"]]'\u003e\u003c/x-flowchart\u003e\n\n        \u003c/body\u003e\n    \u003c/html\u003e\n```\n\n### There are only one properties that you can use to customize this element.\nThe only attribute the user needs to set is the tree attribute that holds an array that represent the structure of the tree\n\n### To Do:\n1. Add support for more tree types\n2. Add support for setting text and background color\n\n### Credit:\nThe CSS for this web component was inspired by code I found on PenCode by Emil Devantie Brockdorff.  That person deserves credit for the css. \n\nNote: It has to be ran from a web server and not just opened locally in a browser or the loading of x-flowchart will be  blocked due to \nCORS policy: (Cross origin requests)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmgrant73%2Fflowchart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmgrant73%2Fflowchart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmgrant73%2Fflowchart/lists"}