To design a full-stack web application using Angular, Node.js, and MongoDB for creating, editing, and sharing interactive flowcharts with real-time collaboration features, follow these steps:

1. Set up the development environment:
   - Install Node.js (https://nodejs.org/en/download/)
   - Install Angular CLI by running `npm install -g @angular/cli`
   - Install MongoDB (https://www.mongodb.com/try/download/community)

2. Create a new Angular project:
   - Run `ng new flowchart-app` to create a new Angular project
   - Change into the newly created directory: `cd flowchart-app`

3. Set up the backend server with Node.js and Express:
   - In the root folder of your project, create a new folder named 'server'
   - Inside the 'server' folder, run `npm init` to create a package.json file
   - Install Express and other necessary packages: `npm install express mongoose cors body-parser`
   - Create a new file named 'app.js' inside the 'server' folder

4. Configure the backend server in app.js:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');

const app = express();

// Middleware
app.use(bodyParser.json());
app.use(cors());

// Connect to MongoDB
mongoose.connect('mongodb://localhost/flowchartDB', { useNewUrlParser: true, useUnifiedTopology: true });

// Define routes
const flowchartRoutes = require('./routes/flowchart');
app.use('/api/flowcharts', flowchartRoutes);

// Start the server
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server started on port ${port}`));
```

5. Create a schema and model for Flowchart in the 'server' folder:
   - Create a new folder named 'models'
   - Inside the 'models' folder, create a file named 'Flowchart.js'

```javascript
const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Flowchart schema
const FlowchartSchema = new Schema({
  title: {
    type: String,
    required: true
  },
  data: {
    type: Object,
    required: true
  },
  collaborators: [
    {
      email: {
        type: String,
        required: true
      }
    }
  ],
  created_at: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model('Flowchart', FlowchartSchema);
```

6. Create routes for flowcharts in the 'server' folder:
   - Create a new folder named 'routes'
   - Inside the 'routes' folder, create a file named 'flowchart.js'

```javascript
const express = require('express');
const router = express.Router();

const Flowchart = require('../models/Flowchart');

// Get all flowcharts
router.get('/', async (req, res) => {
  try {
    const flowcharts = await Flowchart.find();
    res.json(flowcharts);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// Add a new flowchart
router.post('/', async (req, res) => {
  const flowchart = new Flowchart({
    title: req.body.title,
    data: req.body.data,
    collaborators: req.body.collaborators
  });

  try {
    const newFlowchart = await flowchart.save();
    res.status(201).json(newFlowchart);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

// Update an existing flowchart
router.put('/:id', async (req, res) => {
  try {
    const updatedFlowchart = await Flowchart.findByIdAndUpdate(req.params.id, req.body, { new: true });
    res.json(updatedFlowchart);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

// Delete a flowchart
router.delete('/:id', async (req, res) => {
  try {
    await Flowchart.findByIdAndDelete(req.params.id);
    res.json({ message: 'Flowchart deleted' });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

module.exports = router;
```

7. Create Angular components and services for the frontend:
   - Run `ng generate component flowcharts` to create a flowcharts component
   - Run `ng generate service flowcharts` to create a flowcharts service

8. Implement real-time collaboration using Socket.IO:
   - Install Socket.IO: `npm install socket.io socket.io-client`
   - In the backend server (app.js), add the following code to set up Socket.IO:

```javascript
const http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on('connection', (socket) => {
  console.log('User connected');

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });

  // Listen for changes in the flowchart data
  socket.on('flowchart-data', (data) => {
    socket.broadcast.emit('update-flowchart', data);
  });
});

// Replace app.listen with http.listen
http.listen(port, () => console.log(`Server started on port ${port}`));
```

9. In the frontend, modify the flowcharts service to connect to Socket.IO and handle real-time updates.

10. Implement the user interface for creating, editing, and sharing flowcharts using Angular components.

11. Run the backend server by running `node app.js` in the 'server' folder.

12. Run the frontend application by running `ng serve` in the root folder of your project.

13. Access the application at http://localhost:4200/.

This is a high-level overview of designing a full-stack web application for creating, editing, and sharing interactive flowcharts with real-time collaboration features using Angular, Node.js, and MongoDB. You can further customize the user interface, add authentication, and improve error handling as needed.
실시간 협업 기능을 갖춘 대화형 순서도를 생성, 편집 및 공유하기 위해 Angular, Node.js 및 MongoDB를 사용하여 풀스택 웹 애플리케이션을 설계하려면 다음 단계를 따르세요.

1. 개발 환경 설정하기:
 - Node.js 설치(https://nodejs.org/en/download/)
 - `npm install -g @angular/cli`를 실행하여 Angular CLI 설치
 - MongoDB 설치(https://www.mongodb.com/try/download/community)

2. 새 Angular 프로젝트 생성하기 :
 - `ng new flowchart-app`를 실행하여 새 Angular 프로젝트 생성하기
 - 새로 생성된 디렉토리로 변경하기 : `cd flowchart-app`

3. Node.js 및 Express로 백엔드 서버 설정하기
 - 프로젝트의 루트 폴더에 'server'라는 이름의 새 폴더를 생성합니다
 - 'server' 폴더 내에서 `npm init`을 실행하여 package.json 파일을 생성합니다
 - Express 및 기타 필요한 패키지를 설치합니다: `npm install express mongoose cors body-parser`
 - 'server' 폴더 내에 'app.js'라는 이름의 새 파일을 생성

4. app.js에서 백엔드 서버를 구성합니다:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');

const app = express();

// Middleware
app.use(bodyParser.json());
app.use(cors());

// Connect to MongoDB
mongoose.connect('mongodb://localhost/flowchartDB', { useNewUrlParser: true, useUnifiedTopology: true });

// Define routes
const flowchartRoutes = require('./routes/flowchart');
app.use('/api/flowcharts', flowchartRoutes);

// Start the server
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server started on port ${port}`));
```

5. 'server' 폴더에 플로우차트에 대한 스키마 및 모델 생성: 
 - 'models'라는 이름의 새 폴더 생성: 
 - 'models' 폴더 안에 'Flowchart.js'라는 이름의 파일 생성: 


```javascript
const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Flowchart schema
const FlowchartSchema = new Schema({
  title: {
    type: String,
    required: true
  },
  data: {
    type: Object,
    required: true
  },
  collaborators: [
    {
      email: {
        type: String,
        required: true
      }
    }
  ],
  created_at: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model('Flowchart', FlowchartSchema);
```

6. 'server' 폴더에 플로우차트용 경로 생성: 
 - 'routes'라는 이름의 새 폴더 생성 
 - 'routes' 폴더 안에 'flowchart.js'라는 이름의 파일 생성

```javascript
const express = require('express');
const router = express.Router();

const Flowchart = require('../models/Flowchart');

// Get all flowcharts
router.get('/', async (req, res) => {
  try {
    const flowcharts = await Flowchart.find();
    res.json(flowcharts);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// Add a new flowchart
router.post('/', async (req, res) => {
  const flowchart = new Flowchart({
    title: req.body.title,
    data: req.body.data,
    collaborators: req.body.collaborators
  });

  try {
    const newFlowchart = await flowchart.save();
    res.status(201).json(newFlowchart);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

// Update an existing flowchart
router.put('/:id', async (req, res) => {
  try {
    const updatedFlowchart = await Flowchart.findByIdAndUpdate(req.params.id, req.body, { new: true });
    res.json(updatedFlowchart);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

// Delete a flowchart
router.delete('/:id', async (req, res) => {
  try {
    await Flowchart.findByIdAndDelete(req.params.id);
    res.json({ message: 'Flowchart deleted' });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

module.exports = router;
```

7. 프론트엔드용 Angular 컴포넌트 및 서비스 생성하기 :
 - `ng generate component flowcharts`를 실행하여 플로우차트 컴포넌트 생성하기
 - `ng generate service flowcharts`를 실행하여 플로우차트 서비스 생성하기

8. Socket.IO를 사용하여 실시간 협업 구현하기:
 - Socket.IO 설치하기: `npm install socket.io socket.io-client`
 - 백엔드 서버(app.js)에서 다음 코드를 추가하여 Socket.IO를 설정합니다:

```javascript
const http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on('connection', (socket) => {
  console.log('User connected');

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });

  // Listen for changes in the flowchart data
  socket.on('flowchart-data', (data) => {
    socket.broadcast.emit('update-flowchart', data);
  });
});

// Replace app.listen with http.listen
http.listen(port, () => console.log(`Server started on port ${port}`));
```

9. 프론트엔드에서 플로우차트 서비스를 수정하여 Socket.IO에 연결하고 실시간 업데이트를 처리합니다.

10. Angular 컴포넌트를 사용하여 플로차트 생성, 편집, 공유를 위한 사용자 인터페이스를 구현합니다.

11. 'server' 폴더에서 `node app.js`를 실행하여 백엔드 서버를 실행합니다.

12. 프로젝트의 루트 폴더에서 `ng serve`를 실행하여 프론트엔드 애플리케이션을 실행합니다.

13. http://localhost:4200/ 에서 애플리케이션에 액세스합니다.

이 문서는 Angular, Node.js 및 MongoDB를 사용하여 실시간 협업 기능을 갖춘 대화형 순서도를 생성, 편집 및 공유하기 위한 풀스택 웹 애플리케이션 설계에 대한 개괄적인 개요입니다. 필요에 따라 사용자 인터페이스를 추가로 사용자 지정하고, 인증을 추가하고, 오류 처리를 개선할 수 있습니다.