## DiagramViewer使用方法

### 1.安装包

本项目可以使用npm包安装，也可以使用url直接引入。

npm包地址：[@snapano/diagramviewer](https://www.npmjs.com/package/@snapano/diagramviewer)


cdn地址：[@snapano/diagramviewer](https://www.jsdelivr.com/package/npm/@snapano/diagramviewer)


使用案例：[diagramviewer-demo](https://github.com/ggwork/diagramviewer-demo)

使用案例：[solution首页地址](https://snapano.com/solutions/compliance)

### 2.npm包使用方法

**安装**
```shell
npm i @snapano/diagramviewer -S
```

**引入包** 

```shell
// @ts-ignore
import DiagramViewer from '@snapano/diagramviewer'
```

因为diagramviewer并不是ts开发，直接引入会报ts错误，因此引入前要加`@ts-ignore`，忽略ts错误检查

**使用**

以vue3为例，在onMounted（vue2中为mounted）中调用。

```javascript
import {onMounted} from 'vue'

onMounted(()=>{
   let data_url='14'
   let container = document.querySelector('#app')
   let diagram = new DiagramViewer(container,data_url);
})

```
如果是其他框架，请确保DiagramViewer调用的时候，container元素已经存在于真实的dom中。




### 3.url使用方法。

**引入包**

在jsdelivr上搜索`@snapano/diagramviewer`包，然后获取dist文件下index.js 或者index.min.js的地址。

这里我以1.0.9版本的index.min.js为例说明。

```shell
https://cdn.jsdelivr.net/npm/@ggwork/diagramviewer@1.0.9/dist/index.min.js
```

在vue根目录的index.html文件中引入该js

```html
<script src="https://cdn.jsdelivr.net/npm/@snapano/diagramviewer@1.0.0/dist/index.min.js"></script>
```

**使用包**

DiagramViewer作为全局变量挂载到了window上，如果要使用的话，就在对应页面的onMounted方法中调用即可

```javascript
import { onMounted } from "vue";

onMounted(() => {
  let data_url='14'
   let container = document.querySelector('#app')
   let diagram = new DiagramViewer(container,data_url);
});
```


## 4.如何更新npm包和url