Skip to content
Snippets Groups Projects
user avatar
Laura Elges authored
e9d29298
History

FIT-Connect documentation

Local development

Serves the last build (yarn build) statically made

$ yarn
$ yarn start

Serves the current active dev environment

$ yarn
$ yarn serve

Serves the client with hot reloading

Triggers docusaurus start, see 'package.json'. Comfortably update text.

$ yarn
$ yarn run start

Production build

$ export DOCUSAURUS_BASE_URL="/fit-connect/"
$ yarn build

Creating graphs images using Mermaid

Embedding directly (preferred)

Graphs can be created using Mermaid.js. Using Mermaid is as simple as writing a code block:

```mermaid
  sequenceDiagram

  # Participants
  participant A as Alice
  participant B as Bob

  # Relations
  A ->> B: Hi Bob!
  B ->> A: Nice to meet you, Alice
```

Using .svg files

Sometimes you will want to reuse graphs multiple times on different pages. To reduce duplicate graph desciptions you can store it in it's own files. Such a graph consists of two files checked into version control:

  • A .mermaid file (source)
  • A .mermaid.svg file (generated)

If there is really no other way, you may also use a .png file.

You can create the .svg file using Mermaid:

  • Go to Mermaid Live
  • Select the LIGHT theme or set "theme": "default" in the Config tab on the left
  • Paste the content of the .mermaid file in the Code tab
  • Export under Actions -> SVG (bottom left)

Alternatively, you can also use the Mermaid CLI: Example (in Docker):

$ pwd
/home/jonas/Code/fit-connect/docs

$ docker run --pull=always --rm -u `id -u`:`id -g` \
    -v `pwd`:/data minlag/mermaid-cli \
    -i static/images/status/status_destination.mermaid