Skip to content
This repository has been archived by the owner on Jul 8, 2023. It is now read-only.

ZenUml/core

Repository files navigation

editor

ZenUML/Core

ZenUML is JavaScript-based diagramming tool that requires no server. It uses Markdown-inspired text definitions and a renderer to create and modify sequence diagrams. The main purpose of ZenUML is to help documentation catch up with development.

ZenUML allows even non-programmers to easily create beautiful sequence diagrams through the ZenUML Live Editor.

You can use it ZenUML on your favorite platforms and applications:

Integrations

ZenUML can be integrated with your favorite tools and platforms as a library or an embeddable widget. Please follow the integration guide for detailed steps.

Development

yarn install
yarn start

CI/CD

CI/CD is done with GitHub Actions. The workflow is defined in .github/workflows/*.yml.

gh-pages.yml

This workflow has two jobs: build -> deploy.

test  -> npm publish
      -> cy tests
      -> build site -> deploy gh-pages

This workflow is triggered on every push to the main branch. It will build the project and publish the dist folder to the gh-pages branch.

Put localhost on the internet

We sometimes need to put our localhost on the internet so that we can test it remotely.

Ngrok is a good tool for this. It is free for personal use. But if you want to use a custom domain, you have to pay. If you want to use custom domain, we suggest Cloudflare tunnels for this.

Ngrok [TODO]

Cloudflare tunnels [for collaborators only]

  1. Start your local dev server at 8080 with pnpm dev.
  2. Request a subdomain from the team. For example, air.zenuml.com.
  3. You will be given a command that install a service locally. Run it.
  4. Your localhost:8080 will be available at air.zenuml.com.

Code Structure

This repository contains both the DSL parser and the renderer.

The parser is generated with Antlr4. You can find the definition at src/g4. Generated parser is at src/generated-parser. Parser enhancement with customised functionalities is in the src/parser folder.

Almost everything else under serc are for the renderer. The render is based on VueJs 2.x.