Diagram

Roughness does not provide any diagram component. We recommend you to use Mermaid for static diagrams, and to use vue-chartjs, chart.js and chartjs-plugin-roughness when driven by a numerical data set. You can integrate both of them with roughness easily.

Mermaid

npm i mermaid

Usage

import mermaid from 'mermaid'
import { useColors } from 'roughness'

const colors = useColors()

mermaid.initialize({
  startOnLoad: false,
  theme: 'base',
  themeVariables: {
    fontFamily: 'var(--r-common-font-family)',
    primaryColor: colors.value.primaryColor,
    primaryTextColor: colors.value.textColor,
    lineColor: colors.value.textColor,
  },
})

Example

Show Code

<script lang="ts" setup>
import mermaid from 'mermaid'
import { RInput, RPicture, RSpace } from 'roughness'
import { ref, watchEffect } from 'vue'

let container = ref<HTMLElement>()

const graph = ref(`
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
`.trim())

watchEffect(async () => {
  const element = container.value
  if (element) {
    try {
      const { svg } = await mermaid.render('graph-1', graph.value)
      element.innerHTML = svg
    } catch {
      element.innerHTML = ''
    }
  }
})
</script>

<template>
  <RSpace vertical>
    <RInput v-model="graph" :lines="5" />
    <RPicture :attrs="{ id: undefined, class: 'r-mermaid' }">
      <span ref="container"></span>
    </RPicture>
  </RSpace>
</template>

<style lang="scss">
.r-mermaid text,
.r-mermaid .label,
.r-mermaid .label text,
.r-mermaid span {
  fill: var(--r-common-color);
  color: var(--r-common-color);
  text-shadow: var(--r-common-stroke-text-shadow);
}
.r-mermaid p {
  margin: 0;
}
</style>

graph TD; A-->B; A-->C; B-->D; C-->D;

Chart.js

npm i vue-chartjs chart.js chartjs-plugin-roughness

Usage

import 'chartjs-plugin-roughness'
import { BarElement, CategoryScale, Chart, LinearScale } from 'chart.js'

// for bar charts
Chart.register(BarElement, CategoryScale, LinearScale)

Chart.defaults.font.family = '\'Xiaolai SC\', cursive'

Example

Show Code

<script lang="ts" setup>
import { useColors } from 'roughness'
import { computed } from 'vue'
import { Bar } from 'vue-chartjs'

const colors = useColors()

const chartData = computed(() => ({
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      data: [40, 20, 12],
      borderColor: [
        colors.value.primaryColor,
        colors.value.textColor,
        colors.value.errorColor,
      ],
      backgroundColor: [
        colors.value.primaryColor,
        colors.value.textColor,
        colors.value.errorColor,
      ],
    },
  ],
}))

const chartOptions = computed(() => ({
  responsive: true,
  scales: {
    x: {
      ticks: {
        color: colors.value.textColor,
      },
    },
    y: {
      ticks: {
        color: colors.value.textColor,
      },
    },
  },
}))
</script>

<template>
  <Bar :data="chartData" :options="chartOptions" />
</template>