다양한 Notation(BPMN, UML, Hexagonal) 출력 지원

[kimsanghoon1]

정교한 Meta Model 설계를 통한 다양한 표준 노테이션 출력 기능
EventStorming Mode에서만 편집 Only
UML Diagram, Hexagonal Architecture, BPMN Notation convert 지원

[jinyoung]

Hexagonal 도형 컴포넌트 예시

<template>


  <g v-bind:transform="transform" fill="none" stroke="#000">


    <path fill="#92d050" d="m56.472443 112.9422l-56.472416 -33.210083l0 -46.493217l56.472416 -33.210087l56.472412 33.210087l0 46.493217z" fill-rule="evenodd"/><path stroke="#42719b" stroke-width="1.3333333333333333" stroke-miterlimit="800.0" stroke-linecap="butt" d="m56.472443 112.9422l-56.472416 -33.210083l0 -46.493217l56.472416 -33.210087l56.472412 33.210087l0 46.493217z" fill-rule="evenodd"/><path fill="#ffff00" d="m56.462296 93.679276l-34.80313 -20.472603l0 -33.47999l34.80313 -20.472603l34.80313 20.472603l0 33.47999z" fill-rule="evenodd"/><path stroke="#42719b" stroke-width="1.3333333333333333" stroke-miterlimit="800.0" stroke-linecap="butt" d="m56.462296 93.679276l-34.80313 -20.472603l0 -33.47999l34.80313 -20.472603l34.80313 20.472603l0 33.47999z" fill-rule="evenodd"/>


      <text x="55" y="54" text-anchor="middle" font="10px 'serif'" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: serif; cursor: move; background-color: rgb(255, 255, 255);" fill-r="1" fill-cx="0.1" fill-cy="0.1" fill-opacity="1" stroke-width="1.2" r="10" font-size="12px" id="Task_1_LABELFO">
        <tspan dy="3.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
          {{ value.name.text }}
        </tspan>
      </text>

    <g v-if="value.inboundPorts" v-bind:transform="inboundPortTransform(index)" v-for="(port, index) in value.inboundPorts">
      <rect x="0" y="0" width="50" height="15" fill="#fafafa"/>
      <text x="25" y="5" text-anchor="middle" font="10px 'serif'" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 7px; line-height: normal; font-family: serif; cursor: move; background-color: rgb(255, 255, 255);" fill-r="1" fill-cx="0.1" fill-cy="0.1" fill-opacity="1" stroke-width="1.2" r="10" font-size="12px">
        <tspan dy="3.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
          {{ port.name }}
        </tspan>
      </text>
    </g>


    <g v-if="value.outboundPorts" v-bind:transform="outboundPortTransform(index)" v-for="(port, index) in value.outboundPorts">
      <rect x="0" y="0" width="50" height="15" fill="#fafafa"/>
      <text x="25" y="5" text-anchor="middle" font="10px 'serif'" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 7px; line-height: normal; font-family: serif; cursor: move; background-color: rgb(255, 255, 255);" fill-r="1" fill-cx="0.1" fill-cy="0.1" fill-opacity="1" stroke-width="1.2" r="10" font-size="12px">
        <tspan dy="3.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
          {{ port.name }}
        </tspan>
      </text>
    </g>
  </g>

</template>

<script>

  export default{

      name: 'Microservice',
      props: {
          value: Object
      },

    watch: {
      activity:{

          handler: function move(){

          },
        deep: true
      }

    },




    created: function(){
    },

    computed: {

       transform: function(){
           var x = this.value.elementView.x;
           var y = this.value.elementView.y;

        return "translate("+x+","+y+") rotate(0)";
       },

      x: function(){
          return  this.value.elementView.x;
      },

      y: function(){
          return  this.value.elementView.y;
      }

    },

    methods: {

      inboundPortTransform: function(index){

        //return "translate(-20, " + (index * 20) + ")";
        return "translate(-20, " + ((index+1) * 70 / (this.value.inboundPorts.length+1)) + ")";

      },

      outboundPortTransform: function(index){

        return "translate(100, " + (20+ ((index+1) * 70 / (this.value.outboundPorts.length+1))) + ")";

      }

    }



  }

</script>

용례)

<template>

<svg height="1448" version="1.1" width="1704" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; background-color: rgb(247, 247, 247); user-select: none; background-image: url(&quot;/static/image/grid.gif&quot;);" id="OG_5264" >

                  <microservice v-for="(child, index) in childs[1]" v-model="childs[1][index]" />


                </svg>
</template>

....

   childs:[
              {
                name: {text: "Order"},
                elementView: {x:100, y:100},
                _type: "org.uengine.msa.BoundedContext",
                inboundPorts: [
                  {_type: "org.uengine.msa.ports.Command", name: "Place an order"},
                  {_type: "org.uengine.msa.ports.Command", name: "Cancel an order"},
                ],
                outboundPorts: [
                  {_type: "org.uengine.msa.ports.Event", name: "OrderPlaced"},
                  {_type: "org.uengine.msa.ports.Event", name: "OrderChanged"},
                  {_type: "org.uengine.msa.ports.Event", name: "OrderCancelled"},
                ]
              },
           ]

4. 작업방법

• 출력하고자 하는 포맷이 단순 이미지 인 경우는 해당 예상 이미지의 SVG 를 먼저 생성한다.
  예) https://docs.google.com/presentation/d/1mrYBKbFFjuW2OeBNrk_eNR239qw3pg13jHXedAGlAAw/edit?usp=sharing
• 이 때 파워포인트로 된 템플릿을 사다가 Google slides에 업로드한후 SVG 내용을 쉽게 얻어낼 수 있다.
• 얻어낸 SVG 에서 위치이동이나 변경이 필요한 부분만 vue.js 의 calculate 나 function 을 사용하여 대치시킨다.

다음과 같은 결과를 얻을 수 있다: