{"id":13440616,"url":"https://github.com/livechat/octopus","last_synced_at":"2025-03-20T10:31:36.540Z","repository":{"id":25192625,"uuid":"103398738","full_name":"livechat/octopus","owner":"livechat","description":"🐙  Octopus - Internal wiki with diagrams for software and product teams","archived":false,"fork":false,"pushed_at":"2022-12-07T01:31:51.000Z","size":2289,"stargazers_count":291,"open_issues_count":22,"forks_count":34,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-11T11:08:05.906Z","etag":null,"topics":["create-react-app","firebase","graphviz","javascript","netlify","wiki"],"latest_commit_sha":null,"homepage":"","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/livechat.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":"2017-09-13T12:46:30.000Z","updated_at":"2025-01-22T19:36:58.000Z","dependencies_parsed_at":"2023-01-14T07:00:52.190Z","dependency_job_id":null,"html_url":"https://github.com/livechat/octopus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livechat%2Foctopus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livechat%2Foctopus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livechat%2Foctopus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livechat%2Foctopus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/livechat","download_url":"https://codeload.github.com/livechat/octopus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244595043,"owners_count":20478397,"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":["create-react-app","firebase","graphviz","javascript","netlify","wiki"],"created_at":"2024-07-31T03:01:24.455Z","updated_at":"2025-03-20T10:31:36.136Z","avatar_url":"https://github.com/livechat.png","language":"JavaScript","readme":"# Octopus\n\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n**🐙 Octopus** is a server-less, easy-to-setup internal wiki page with built-in software diagrams support. It uses **Markdown** for writing content and enhances it with [Graphviz](http://graphviz.org) and [flowchart.js](http://flowchart.js.org/) diagrams for easy software documentation.\n\nHere's a default wiki page:\n\n\u003ckbd\u003e\n  \u003cimg src=\"./readme-assets/index.png\" alt=\"\" height=\"300\" /\u003e\n\u003c/kbd\u003e\n\n### Technology\n\nOctopus is a [JAMstack](https://jamstack.org/) app that uses [Google Firebase](https://firebase.google.com/) as its backend. You do not need a web server (such as Apache) or a database (like MySQL) to have it up and running. You can deploy the app to a CDN for free using [Netlify](https://www.netlify.com/).\n\n#### With Octopus, you can:\n* require users to be signed in to read or edit the wiki (supported providers: Google, GitHub, Email/Password, Twitter and Phone),\n* create access rules for reading and editing (restrict particular users or auth domains),\n* host wiki page under a custom domain.\n\n#### Features\n* create new wiki pages with Markdown language,\n* edit menu (using Markdown) to easily link to wiki pages,\n* include [Graphviz](http://www.graphviz.org/Gallery.php) and [flowchart.js](http://flowchart.js.org/) diagrams inside your Markdown content,\n* see who is currently reading your wiki articles,\n* adjust your Wiki front-end with React ([create-react-app](https://github.com/facebookincubator/create-react-app)).\n\n\n#### Example system diagram\n\u003ckbd\u003e\n  \u003cimg src=\"./readme-assets/system-diagram.png\" alt=\"\" height=\"300\" /\u003e\n\u003c/kbd\u003e\n\n#### Page editing with Markdown\n\u003ckbd\u003e\n  \u003cimg src=\"./readme-assets/edit-page.png\" alt=\"\" height=\"300\" /\u003e\n\u003c/kbd\u003e\n\n## Installation\n1. Clone this repository to your computer.\n2. Copy config template file (`src/config/config.template.js`) to `src/config/config.js`.\n\n```\ncp src/config/config.template.js src/config/config.js\n```\n\n\u003e Note: you can safely commit `src/config/config.js` file to a repository. This file does not store sensitive credentials - all config variables will be publicly available in the `.js` file anyway.\n\n3. Create a new Firebase project here: https://firebase.google.com/\n4. Pick \"Add Firebase to your web app\" and copy the config to `src/config/config.js` created in step 2.\n\n\u003ckbd\u003e\n  \u003cimg src=\"./readme-assets/config.png\" alt=\"\" height=\"300\" /\u003e\n\u003c/kbd\u003e\n\u003cbr /\u003e\u003cbr /\u003e\n\n5. In Firebase Console, go to **Authentication** \u003e **Sign-in method**, choose a provider and enable it. Octopus has been tested with Google and GitHub providers.\n\u003ckbd\u003e\n  \u003cimg src=\"./readme-assets/auth-provider.png\" alt=\"\" height=\"300\" /\u003e\n\u003c/kbd\u003e\n\u003cbr /\u003e\u003cbr /\u003e\n\n6. Still in **Authentication** \u003e **Sign-in method** section, add the domain that will host your app to **Authorized Domains** list.\n\u003ckbd\u003e\n  \u003cimg src=\"./readme-assets/domain.png\" alt=\"\" height=\"300\" /\u003e\n\u003c/kbd\u003e\n\u003cbr /\u003e\u003cbr /\u003e\n\n7. Build the app:\n```\nnpm install\nnpm run build\n```\n\n8. Deploy the `build/` directory to your webserver.\n\n## Server-less deployment\nYou can skip hosting the app on your webserver (step 8 from installation guide above). All you need is to deploy the app to a cloud-based CDN provider.\n\nWe recommend using [Netlify](https://www.netlify.com/).\n\nIt will automatically deploy your forked Octopus GitHub repo to production after each commit. It will also prepare a ready-to-use URL that all your users can access immediately. Later on, you can set up a custom domain to make it look more professional.\n\nNote: when deploying Octopus via Netlify, fill in the following details in the setup wizard:\n\n\u003e Build command: `npm run build`\u003cbr /\u003e\n\u003e Publish directory: `build`\n\n## Security\nBy default, any user can view and edit your wiki page. Probably this is not what you expect!\n\nTo make your content accessible only to your company, go to **Firebase Console** \u003e **Database** \u003e **Rules** and restrict who can read and edit your wiki page.\n\nHere's an example rule if you use Google sign-in provider and your company email address ends with **@livechatinc.com**:\n\n\u003ckbd\u003e\n  \u003cimg src=\"./readme-assets/rules.png\" alt=\"\" height=\"300\" /\u003e\n\u003c/kbd\u003e\n\u003cbr /\u003e\u003cbr /\u003e\n\n```\n{\n  \"rules\": {\n    \".read\": \"auth.token.email.endsWith('@livechatinc.com')\",\n    \".write\": \"auth.token.email.endsWith('@livechatinc.com')\"\n  }\n}\n```\n\nYou can read more about possible security rules in [Realtime Database Rules](https://firebase.google.com/docs/database/security/) documentation.\n\n## Using Octopus\nOctopus is designed to be very easy to use.\n\nTo create a new page, just enter the URL you wish to create, for example: `https://\u003cyour-octopus-domain\u003e/test/new-page`. If such page has not been created yet, you will see the following screen:\n\n\u003ckbd\u003e\n  \u003cimg src=\"./readme-assets/create-page.png\" alt=\"\" /\u003e\n\u003c/kbd\u003e\n\u003cbr /\u003e\u003cbr /\u003e\n\nWhen you click \"Create this page\", new page will be created and filled in with default content, ready to edit:\n\n\u003ckbd\u003e\n  \u003cimg src=\"./readme-assets/new-page.png\" alt=\"\" height=\"300\" /\u003e\n\u003c/kbd\u003e\n\u003cbr /\u003e\u003cbr /\u003e\n\nOnce the page is ready, you can easily include it in the menu:\n\n\u003ckbd\u003e\n  \u003cimg src=\"./readme-assets/edit-menu.png\" alt=\"\" /\u003e\n\u003c/kbd\u003e\n\u003cbr /\u003e\u003cbr /\u003e\n\nThat's it. Send all your teammates link to Octopus and they're ready to contribute!\n\n\u003chr /\u003e\n\n## Project background\nWhy did we build Octopus?\n\nWe've struggled with finding an easy-to-use software for documenting internal systems at [LiveChat](https://www.livechatinc.com/).\n\nWe wanted it to be easy to contribute for **non-technical people** and include easily **editable software diagrams**. We couldn't find a satisfying product, so we've built one.\n\n## Built with\n* React via [create-react-app](https://github.com/facebookincubator/create-react-app).\n* [viz.js](https://github.com/mdaines/viz.js/)\n* [flowchart.js](https://github.com/adrai/flowchart.js)\n* [Firebase](https://firebase.google.com/)\n\n## Changelog\n* 15.09.2017 - \"Open as .png\" option\n* 13.09.2017 - Initial release\n\n## Authors\n[Bartosz Olchówka](https://twitter.com/bolchowka/) / CTO @ [LiveChat](https://www.livechatinc.com/)\n\n## License\nThis project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details\n","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivechat%2Foctopus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flivechat%2Foctopus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivechat%2Foctopus/lists"}