Design a full-stack web application using Angular, Node.js, and MongoDB that allows users to create, edit, and share interactive flowcharts. The application should provide real-time collaboration features and save flowchart data to the database.
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.