sequence-diagram v0.1.0

#Introduction

What is sequence-diagram library?

sequence-diagram is a library that allows you to create sequence diagrams directly in browser as a web component (custom, reusable, encapsulated HTML tags).

Get Started

The official guide assumes entry level knowledge of HTML, CSS and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into using this library. Instead, you may want to just use our pre-built application at https://www.zenuml.com. It is free and works in all modern browsers.

The easiest way to try out sequence-diagram is using the JSFiddle Hello World example. Feel free to open it in another tab and follow along. Or, you can create an index.html file and include both Vue and sequence-diagram library.

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/sequence-diagram"></script>

<sequence-diagram>
  A.method()
</sequence-diagram>

Let me explain the above code line by line.

Include vue

sequence-diagram web component library is developed using VueJs. However, the dependency on VueJs is externalised. We have to include vue before first.

Include sequence-diagram library

The above code includes the latest version of sequence-diagram. To find all available version goto https://unpkg.com/sequence-diagram/.

Use <sequence-diagram> tag

To render the sequence diagram, we need to wrap the DSL in the sequence-diagram tag.

Put ZenUML DSL in

Wrapped in the sequence-diagram is a DSL defined for ZenUML. The language is defined at https://zenuml.com/help.html.