# Examples

# Horizontal vs vertical flowchart

Node A

To B

To C

Node B

Node C

<template>
  <div class="centered">
    <flowchart
      :mode="availableMode[mode]"
      :nodes="nodes"
      :edges="edges" />
    <button @click="toggleMode">{{ availableMode[mode] }} mode. Click to toggle</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      nodes: {
        a: { text: 'Node A' },
        b: { text: 'Node B' },
        c: { text: 'Node C' }
      },
      edges: [
        { from: 'a', to: 'b', text: 'To B' },
        { from: 'a', to: 'c', text: 'To C' }
      ],
      mode: 0
    }
  },
  computed: {
    availableMode () {
      return ['vertical', 'horizontal']
    }
  },
  methods: {
    toggleMode () {
      this.mode = Number(!this.mode)
    }
  }
}
</script>

# Multiple types of nodes

ellipse

rectangle

parallelogram

rhombus

rounded-rectangle

<template>
  <div class="centered">
    <flowchart
      :nodes="nodes"
      :edges="edges" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      nodes: {
        a: { text: 'ellipse', symbol: 'ellipse' },
        b: { text: 'rectangle', symbol: 'rectangle' },
        c: { text: 'parallelogram', symbol: 'parallelogram' },
        d: { text: 'rhombus', symbol: 'rhombus' },
        e: { text: 'rounded-rectangle', symbol: 'rounded-rectangle' }
      },
      edges: [
        { from: 'a', to: 'b' },
        { from: 'a', to: 'c' },
        { from: 'c', to: 'd' },
        { from: 'c', to: 'e' }
      ]
    }
  }
}
</script>

# Edge directions

Node A

To B

To C

Node B

Back to A

Straight

Node C

Back to A

Node D

Circular

<template>
  <div class="centered">
    <flowchart
      :nodes="nodes"
      :edges="edges" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      nodes: {
        a: { text: 'Node A' },
        b: { text: 'Node B' },
        c: { text: 'Node C' },
        d: { text: 'Node D' }
      },
      edges: [
        { from: 'a', to: 'b', text: 'To B' },
        { from: 'a', to: 'c', text: 'To C' },
        { from: 'c', to: 'a', text: 'Back to A' },
        { from: 'b', to: 'a', text: 'Back to A' },
        { from: 'b', to: 'c', text: 'Straight' },
        { from: 'b', to: 'd' },
        { from: 'c', to: 'd' },
        { from: 'd', to: 'd', text: 'Circular' }
      ]
    }
  }
}
</script>

# Cross vs bent edges

Node A

To B

To C

Node B

Node C

<template>
  <div class="centered">
    <flowchart
      :nodes="nodes"
      :edges="edgesWithTypes" />
    <button @click="toggleMode">Toggle edge mode</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      nodes: {
        a: { text: 'Node A' },
        b: { text: 'Node B' },
        c: { text: 'Node C' }
      },
      edges: [
        { from: 'a', to: 'b', text: 'To B' },
        { from: 'a', to: 'c', text: 'To C' }
      ],
      edgeType: 0
    }
  },
  computed: {
    availableTypes () {
      return ['bent', 'cross']
    },
    edgesWithTypes () {
      return this.edges.map((edge) => ({
        ...edge,
        type: this.availableTypes[this.edgeType]
      }))
    }
  },
  methods: {
    toggleMode () {
      this.edgeType = Number(!this.edgeType)
    }
  }
}
</script>

# Edge markers types

Node A

To B

Node B

<template>
  <div class="centered">
    <flowchart
      style="height: 100px;"
      mode="horizontal"
      :nodes="nodes"
      :edges="edgesWithTypes" />
    <button @click="toggleMode">Edges marker on {{ availableTypes[edgeMarker] }}. Click to toggle</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      nodes: {
        a: { text: 'Node A' },
        b: { text: 'Node B' }
      },
      edges: [
        { from: 'a', to: 'b', text: 'To B', marker: 'end' },
      ],
      edgeMarker: 0
    }
  },
  computed: {
    availableTypes () {
      return ['end', 'both']
    },
    edgesWithTypes () {
      return this.edges.map((edge) => ({
        ...edge,
        marker: this.availableTypes[this.edgeMarker]
      }))
    }
  },
  methods: {
    toggleMode () {
      this.edgeMarker = Number(!this.edgeMarker)
    }
  }
}
</script>

← API