{"id":15287600,"url":"https://github.com/scale-tone/az-func-as-a-graph","last_synced_at":"2025-04-11T14:45:41.150Z","repository":{"id":50271486,"uuid":"356413463","full_name":"scale-tone/az-func-as-a-graph","owner":"scale-tone","description":"Visualizes your Azure Functions project in form of a graph","archived":false,"fork":false,"pushed_at":"2024-05-18T17:37:53.000Z","size":29566,"stargazers_count":54,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T10:51:15.298Z","etag":null,"topics":["azure-functions","codespaces","mermaid","serverless","visual-studio-code","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/scale-tone.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-09T22:32:50.000Z","updated_at":"2025-01-20T20:25:02.000Z","dependencies_parsed_at":"2024-10-31T05:13:59.456Z","dependency_job_id":null,"html_url":"https://github.com/scale-tone/az-func-as-a-graph","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":"scale-tone/durable-mvc-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scale-tone%2Faz-func-as-a-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scale-tone%2Faz-func-as-a-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scale-tone%2Faz-func-as-a-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scale-tone%2Faz-func-as-a-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scale-tone","download_url":"https://codeload.github.com/scale-tone/az-func-as-a-graph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248017994,"owners_count":21034042,"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":["azure-functions","codespaces","mermaid","serverless","visual-studio-code","vscode","vscode-extension"],"created_at":"2024-09-30T15:32:26.603Z","updated_at":"2025-04-11T14:45:41.132Z","avatar_url":"https://github.com/scale-tone.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![logo](https://raw.githubusercontent.com/scale-tone/az-func-as-a-graph/master/screenshot1.png)\n# az-func-as-a-graph\n\nVisualizes your Azure Functions project in form of a graph. Accepts links to git repos (GitHub, Azure DevOps) or local paths.\n\nUPD1: is now also a part of [Durable Functions Monitor VsCode extension](https://marketplace.visualstudio.com/items?itemName=DurableFunctionsMonitor.durablefunctionsmonitor).\n**Command Palette -\u003e Visualize Functions as a Graph...**\n\nUPD2: is now also [available as a VsCode web extension](https://marketplace.visualstudio.com/items?itemName=DurableFunctionsMonitor.az-func-as-a-graph). Install it in your browser once - and it will then automatically visualize Functions in every GitHub repo you're observing with [VsCode for the Web](https://code.visualstudio.com/docs/editor/vscode-web) (by pressing `.` on a GitHub repo).\n\n## How to run as a VsCode Web Extension\n\nJust [install it from the Marketplace](https://marketplace.visualstudio.com/items?itemName=DurableFunctionsMonitor.az-func-as-a-graph). Then every time you open a Functions project (a project with `host.json` file in it) the graph will appear automatically. Alternatively click on a `host.json` file and use the `az-func-as-a-graph: Show...` command.\n\nBecause it is a **web** extension, you only need to install it once - then it will live in your browser and work on every Azure Functions project you open. Of course, you can also install it into your normal VsCode instance and/or into a GitHub Codespace.\n\n## How to run as a GitHub Codespace\n\nFor this to work you'll need to have [GitHub Codespaces](https://github.com/features/codespaces) enabled for your org.\n\n* Click on this button:\n\n  \u003cimg src=\"https://user-images.githubusercontent.com/5447190/185810992-a8b131fa-0d50-4adf-bc80-426b33ef8cdd.png\" width=\"500px\"/\u003e\n\n    (If you don't see it, it means that [GitHub Codespaces](https://github.com/features/codespaces) are not enabled)\n\n* Once a Codespace instance is started, type `func start` in Terminal window.\n* Click on this button:\n\n  \u003cimg src=\"https://user-images.githubusercontent.com/5447190/185811296-383cd0e7-bdec-4886-bac6-3c048c9095da.png\" width=\"300px\"/\u003e\n\n    az-func-as-a-graph's UI will be opened in a separate browser tab. \n\n* Enter a link to any Azure Functions project (e.g. `https://github.com/scale-tone/az-func-as-a-graph`) into there and press 'Visualize'.\n\n## How to run as a custom GitHub Action\n\nThis repo is also a custom GitHub action, so you can run it as part of your workflow like this:\n\n```\n    steps:\n\n    - uses: scale-tone/az-func-as-a-graph@github-action-v1.3\n      with:\n        projectFolder: ${{ github.workspace }}/path-to-my-function-project\n        outputFile: my-function-graph.htm\n        templateFile: my-custom-html-template.htm\n        doNotRenderFunctions: false\n        doNotRenderProxies: false\n```\n\nAll parameters are optional.\n\n\n## How to run as part of Azure DevOps build pipeline\n\nInstall [this Azure DevOps extension](https://marketplace.visualstudio.com/items?itemName=DurableFunctionsMonitor.az-func-as-a-graph-do-extension) into your org and then add `az-func-as-a-graph` task into your pipeline:\n\n\u003cimg src=\"https://user-images.githubusercontent.com/5447190/126083277-89e4e9d2-6b13-4d2c-af4c-e2a0a12932c0.png\" width=\"500px\"/\u003e\n\n## How to run from command line\n\nThis mode allows to programmatically generate diagrams out of your source code, e.g. as part of your build pipeline.\n\nClone this repo, then type the following from the project root folder:\n```\nnpm install\nnode az-func-as-a-graph {path-to-my-functions-project-folder} {output-file-name} {json-file-with-settings}\n```\n\nThis now became possible thanks to [mermaid-cli](https://github.com/mermaid-js/mermaid-cli) NPM package (which will be locally installed by [az-func-as-a-graph](https://github.com/scale-tone/az-func-as-a-graph/blob/main/az-func-as-a-graph.js) script at its first run).\n\n`npm install` is only needed once, of course.\n\n`{path-to-my-functions-project-folder}` can be either local folder or link to a GitHub repo. If it is a link, then it can as well point to a particular branch or tag and/or include a relative path. E.g. `https://github.com/scale-tone/WhatIfDemo/tree/20190516.1/WhatIfDemo-Functions`.\n\n`{output-file-name}` should be a file name with local path. \n* If its extension is `.svg`, the graph will be written to this file in SVG format.\n* If its extension is `.htm`, a static HTML page will be generated. The tool will also try its best to make that page *interactive*, so that e.g. when you click on a graph node, the relevant Function's source code is shown. [Here is an example of such a page](https://scale-tone.github.io/temp/WhatIfDemo-Functions.htm). If the project link contains a branch/tag, the links to sources will be relative to that branch/tag.\n* If its extension is `.json`, a Functions Map file will be generated and saved as JSON. Then you can upload this file to your [Durable Functions Monitor](https://github.com/scale-tone/DurableFunctionsMonitor) standalone/injected instance, to make it show you an interactive animated Functions Graph.\n* If its extension is `.md`, a [Markdown file with embedded graph](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) will be generated.\n\n\n`{json-file-with-settings}` is an optional path to an optional JSON file with optional settings. Like this one:\n```\n{\n    \"templateFile\": \"path-to-my-custom-template-file\",\n    \"repoInfo\": {\n        \"originUrl\": \"e.g. https://github.com/scale-tone/repeating-map-reduce-sample\",\n        \"repoName\": \"e.g. repeating-map-reduce-sample\",\n        \"branchName\": \"e.g. main\",\n        \"tagName\": \"e.g. v1.2.3\"\n    },\n    \"doNotRenderFunctions\": true,\n    \"doNotRenderProxies\": true\n}\n```\n\n   `templateFile` specifies a custom HTML or Markdown template to be used, when generating HTML pages or Markdown files. If omitted, [this default one](https://github.com/scale-tone/az-func-as-a-graph/blob/main/cli/graph-template.htm) will be used for HTML and [this default one](https://github.com/scale-tone/az-func-as-a-graph/blob/main/cli/graph-template.md) will be used for Markdown.\n\n   `repoInfo` setting provides a way to customize source code repo information, when needed. It is only used for mapping and rendering links to source code. If omitted, this data will be retrieved automatically with relevant git commands. E.g. you might want to explicitly specify `repoInfo.originUrl` to point source code links to GitHub CodeSpaces (https://github.dev) instead of https://github.com.\n\n   `doNotRenderFunctions` hides functions from the graph.\n    \n   `doNotRenderProxies` hides proxies from the graph.\n\n## How to deploy to Azure\n\n[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2Fscale-tone%2Faz-func-as-a-graph%2Fmain%2Farm-template.json)\n\nThe above button will deploy *these sources* into *your newly created Function App instance*. Note that it will be in AppService pricing tier. Keep an eye on the cost of it and don't forget to remove it once not needed anymore. \n\n\n## How to run locally\n\nThis tool is itself an Azure Function (written in TypeScript), so to run it you'll need:\n- [Azure Functions Core Tools](https://github.com/Azure/azure-functions-core-tools#installing) package installed **globally** (`npm i -g azure-functions-core-tools`).\n\nClone this repo to your devbox, then type the following from the project root folder:\n```\nnpm install\nnpm run build\nfunc start\n```\n\nThen navigate to `http://localhost:7071` with your browser, specify either local path or link to a github repo and press 'Visualize'.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscale-tone%2Faz-func-as-a-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscale-tone%2Faz-func-as-a-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscale-tone%2Faz-func-as-a-graph/lists"}