如何使用ProcessOn制作“组织结构图”

Posted 2023-04-20

用ProcessOn画流程图和思维导图都很棒，但是不知道怎样制作组织结构图？

目前ProcessOn内制作组织结构图可以通过两种文件类型实现，一个是流程图，一个是思维导图。先从操作步骤较少的思维导图介绍。

思维导图样式的组织结构图：

在模板页面点击组织结构图-点击空白新建按钮

选中中心主题，按enter新建子主题；选中子主题，按enter新建同级主题；选中主题按tab新建子主题。

在流程图创建组织结构图：

在模板页面新建，位置如下

进入文件编辑页面后直接将需要的图形拖至画布，一般用到最多的就是矩形，然后根据需要进行排列编辑，图像之间创建链接可以通过快捷键实现，按住键盘上的L可以绘制连线，根据需要进行添加就好。

一般组织结构图的样式如下，请参考

参考技术A 你好，我最近每天都在绘制流程图，我用的不是你上面所说的工具，我是用在线网站进行绘制的，还是比较方便的，下面将方法和你说下。
打开画图工具，点击页面中央【立即体验】进入类型选择界面，点击左上角【新建文件】选择【流程图】进入在线绘制界面；

在页面的四周有很多的工具栏，这些在绘制的过程中都是可以使用的，点击左侧【基础图形】直接用鼠标将图形拖曳至右边画布需要的位置即可；
双击文本框即可将里面额内容进行编辑，这时在右边出现的工具栏中将可以对文本的样式、排列及背景颜色根据自己的喜好进行设置；
点击右上角【导出】在弹出的菜单栏中选择需要的格式进行导出即可，希望上述的方法可以磅数到你。

是否可以用组织结构图（巴尔干图）制作如下组织结构图？

【中文标题】是否可以用组织结构图（巴尔干图）制作如下组织结构图？

【英文标题】：Is it possible to make the organization chart as follows with the organization chart (Balkan chart)?

【发布时间】：2019-06-28 14:47:28

【问题描述】：

是否可以使用 Orgchart (Balkan Graph) 制作如下图所示的组织结构图？ 查看 API 我找不到解决方案。

https://drive.google.com/file/d/1zQHyP8MDP9gkKvOAbSiKPmJObjIUCpn0/view?usp=sharing

【参考方案1】：

BALKANGraph这里是开发者传道者

基本上你需要用辅助标签标记4个节点

 var chart = new OrgChart(document.getElementById("tree"), 
            template: "ula",
            layout: BALKANGraph.mixed,
            nodeMenu: 
                pdf:  text: "Export PDF" ,
                png:  text: "Export PNG" ,
                svg:  text: "Export SVG" 
            ,
            collapse: 
                level: 2
            ,
            nodeBinding: 
                field_0: "name",
                field_1: "title",
                img_0: "img"
            ,
            nodes: [
                 id: "1", name: "Jack Hill", title: "Chairman and CEO", email: "[e-mail]", img: "https://balkangraph.com/js/img/1.jpg" ,
                 id: "2", pid: "1", name: "Lexie Cole", title: "QA Lead", email: "[e-mail]", img: "https://balkangraph.com/js/img/2.jpg" ,
                 id: "3", pid: "1", name: "Janae Barrett", title: "Technical Director", img: "https://balkangraph.com/js/img/3.jpg" ,
                 id: "4", pid: "1", name: "Aaliyah Webb", title: "Manager", email: "[e-mail]", img: "https://balkangraph.com/js/img/4.jpg" ,
                 id: "5", pid: "2", name: "Elliot Ross", title: "QA", img: "https://balkangraph.com/js/img/5.jpg" ,
                 id: "6", pid: "2", name: "Anahi Gordon", title: "QA", img: "https://balkangraph.com/js/img/6.jpg" ,
                 id: "7", pid: "2", name: "Knox Macias", title: "QA", img: "https://balkangraph.com/js/img/7.jpg" ,
                 id: "8", pid: "3", name: "Nash Ingram", title: ".NET Team Lead", email: "[e-mail]", img: "https://balkangraph.com/js/img/8.jpg" ,
                 id: "9", pid: "3", name: "Sage Barnett", title: "JS Team Lead", img: "https://balkangraph.com/js/img/9.jpg" ,
                 id: "10", pid: "8", name: "Alice Gray", title: "Programmer", img: "https://balkangraph.com/js/img/10.jpg" ,
                 id: "11", pid: "8", name: "Anne Ewing", title: "Programmer", img: "https://balkangraph.com/js/img/11.jpg" ,
                 id: "12", pid: "9", name: "Reuben Mcleod", title: "Programmer", img: "https://balkangraph.com/js/img/12.jpg" ,
                 id: "13", pid: "9", name: "Ariel Wiley", title: "Programmer", img: "https://balkangraph.com/js/img/13.jpg" ,
                 id: "14", pid: "4", name: "Lucas West", title: "Marketer", img: "https://balkangraph.com/js/img/14.jpg" ,
                 id: "15", pid: "4", name: "Adan Travis", title: "Designer", img: "https://balkangraph.com/js/img/15.jpg" ,
                 id: "16", pid: "4", name: "Alex Snider", title: "Sales Manager", img: "https://balkangraph.com/js/img/16.jpg" ,
                 id: "101", pid: "1", tags: ["assistant"], name: "Blair White", title: "Assitant", img: "https://balkangraph.com/js/img/13.jpg" ,
                 id: "102", pid: "1", tags: ["assistant"], name: "Nicky Fraser", title: "Assitant", img: "https://balkangraph.com/js/img/14.jpg" ,
                 id: "103", pid: "1", tags: ["assistant"], name: "Skyler Lewis", title: "Assitant", img: "https://balkangraph.com/js/img/15.jpg" ,
                 id: "104", pid: "1", tags: ["assistant"], name: "Gabby Cline", title: "Assitant", img: "https://balkangraph.com/js/img/16.jpg" 

            ]
        );

        html, body 
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: Helvetica;
        

        #tree 
            width: 100%;
            height: 100%;
        

        .node.assistant line 
            stroke: #F57C00;
        

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>

<div id="tree"></div>

【讨论】：

太棒了，谢谢您的反馈，效果很好。